Introduction à React useCallBack()

Lors de la création d'un site Web à l'aide de React, il est important de tenir compte de la vitesse à laquelle il se charge et de la rapidité avec laquelle les utilisateurs peuvent interagir avec lui. Une façon de rendre un site Web React plus rapide consiste à l'empêcher d'effectuer des tâches inutiles, telles que restituer des parties de la page qui n'ont pas changé.

La fonctionuseCallback() dans React nous aide à y parvenir en mémorisant les fonctions que nous définissons et en les recréant uniquement lorsque cela est nécessaire.Cela peut rendre le site Web plus rapide et plus réactif pour les utilisateurs. React est la bibliothèque JavaScript frontale la plus populaire, selon une enquête Stack Overflow de la même année, suggérant que useCallback() est probablement largement utilisé dans l'industrie.

Dans cet article, nous expliquerons ce qu'est useCallBack() dans React et comment l'utiliser dans notre code React pour améliorer les performances.

Qu'est-ce que useCallBack dans React ?

useCallback() est une fonction hook fournie par React qui est utilisée pour mémoriser une fonction. En d'autres termes, cela aide à optimiser les performances d'un composant en évitant un nouveau rendu indésirable.

Dans React, lorsque l'état ou l'accessoire d'un composant change, le composant est restitué pour refléter les valeurs mises à jour. Ce processus est coûteux en calcul et peut réduire les performances de l'application s'il est mal géré. C'est là que useCallback() est utile.

Avec useCallback(), les utilisateurs peuvent mémoriser une fonction, ce qui signifie qu'elle n'est redéfinie que lorsque ses dépendances changent. Cela évite le re-rendu inutile des composants, optimisant ainsi les performances de l'application.

Voici un exemple -

const memoizedCallback = useCallback(

() => {

fairequelquechose(a, b);

},

[un B],

);

Bien que démarrer avec React via des didacticiels soit un excellent moyen, suivre un cours dynamique pour démarrer avec le développement peut vous aider de manière significative à mettre à jour vos compétences. Découvrez le cours Executive Post Graduate Program en développement de logiciels - Spécialisation en développement Full Stack de upGrad à kickstart!

Avantages de l'utilisation de useCallBack()

Voici quelques avantages de l'utilisation de React useCallBack() -

• useCallback() peut aider les applications React à fonctionner plus rapidement en empêchant les mises à jour inutiles des composants.
• Si un composant récupère beaucoup de données et les affiche sous forme de graphique, il peut bénéficier de useCallback().
• Si le composant parent du graphique est mis à jour, mais que les modifications n'affectent pas le graphique, il n'est pas nécessaire de le mettre à jour et de récupérer à nouveau les données.
• En utilisant useCallback() pour mémoriser la fonction récupérant les données, nous pouvons éviter les mises à jour inutiles et rendre l'application plus rapide et plus fluide.
• Cette optimisation peut améliorer l'expérience utilisateur, car l'application fonctionnera plus rapidement et plus efficacement.

Consultezles cours de développement de logiciels d'upGrad pour vous perfectionner.

Syntaxe et paramètres de useCallBack()

const memoizedCallback = useCallback(

() => {

faire quelque chose();

},

[dépendance1, dépendance2]

);

Dans l'exemple, le crochet useCallback() mémorise la fonction doSomething(), ce qui signifie qu'il met en cache la version précédemment créée. La fonction mise en cache ne sera utilisée que lors des rendus suivants, sauf si la valeur dedependency1 ou dependency2change.

Si l'une de ces dépendances change, une nouvelle version de la fonctiondoSomething() sera créée et la version en cache sera remplacée par la nouvelle.Cela permet d'optimiser les performances de l'application en empêchant les créations de fonctions et les rendus inutiles.

Différence entre useMemo() et useCallBack()

useCallback et useMemo sont des crochets React qui peuvent améliorer les performances d'une application React en mémorisant des valeurs. Les deux crochets prennent une fonction comme argument et renvoient une version mémorisée de cette fonction.

Voici la différence entre les deux :

Scénarios d'utilisation de useCallBack()

Voici les scénarios dans lesquels useCallBack() peut être utilisé -

Optimisation des composants enfants

useCallback React optimise les composants enfants qui reposent sur l'égalité des références pour éviter les rendus inutiles, en particulier lors de la transmission de rappels à ces composants enfants.

Empêcher les rendus inutiles

React useCallback est particulièrement utile lorsque vous avez un composant avec un élément enfant qui est rendu à plusieurs reprises sans en avoir besoin. Vous pouvez passer une fonction de rappel et un tableau de dépendances à useCallback pour éviter les rendus inutiles.

Saisissez votre chance de comprendre en détail la fonction useCallBack() à l'aide du cours Full Stack Software Development Bootcamp de upGrad.

Explorez nos cours populaires de génie logiciel

Exemples d'utilisationCallBack()

Voici quelques exemples d'implémentation du crochet useCallBack().

useCallBack Exemple 1

Lorsqu'un composant parent transmet une fonction en tant qu'accessoire à un composant enfant, un nouveau rendu fréquent du parent peut entraîner un nouveau rendu inutile du composant enfant. Dans de tels cas, utilisez useCallback pour mémoriser la fonction qui peut aider à empêcher ces re-rendus inutiles.

import React, { useCallback } de 'react' ;

fonction ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('Bouton cliqué');

}, []);

retour (

<ChildComponent onClick={handleButtonClick} />

);

}

function ChildComponent({ onClick }) {

retour (

<button onClick={onClick}>Cliquez-moi</button>

);

}

useCallBack Exemple 2

Supposons que vous ayez une fonction qui effectue des calculs complexes sur un grand ensemble de données. Si cette fonction est appelée fréquemment et prend beaucoup de temps à s'exécuter, cela peut entraîner des problèmes de performances dans votre application. Dans ce scénario, vous pouvez utiliser useCallback pour mémoriser la fonction et empêcher une réexécution inutile du calcul.

import React, { useState, useCallback } de 'react' ;

fonction ParentComponent() {

const [données, setData] = useState([]);

const processData = useCallback(() => {

const processedData = "Données traitées" ;

retourner les données traitées ;

}, [données]);

retour (

<ChildComponent processData={processData} />

);

}

function ChildComponent({ processData }) {

const result = processData();

retour (

<div>{résultat}</div>

);

}

Réagissez à l'optimisation des performances à l'aide de useCallBack()

Un crochet useCallback est un outil puissant dans React qui vous permet de mémoriser une fonction, en veillant à ce qu'elle ne soit recréée que lorsque l'une de ses dépendances est modifiée. Ceci est particulièrement avantageux pour les fonctions gourmandes en performances qui sont appelées fréquemment. Consultez l'exemple ci-dessous pour voir comment il peut être utilisé -

import { useState, useEffect } de 'réagir' ;

fonction App() {

const [mot, setWord] = useState("Bob");

const say = () => console.log(`Votre mot est : ${word}`);

useEffet(() => {

dire();

}, [dire]);

retour <div>Bienvenue !</div> ;

}

L'exemple montre que le hook useEffect dépend de la fonction say, ce qui signifie qu'il ne doit se déclencher qu'avec un changement de fonction. Pourtant, en raison des vérifications d'égalité référentielles de React, la fonction dite sera toujours évaluée comme vraie, même en l'absence de changement réel, ce qui entraînera des rendus inutiles.

Le rappel useEffect sera utilisé sur chaque rendu, ce qui n'est pas adapté aux performances. Une façon de résoudre ce problème consiste à déplacer la fonction vers le bloc useEffect , mais ce ne serait pas une solution idéale car vous ne pourriez pas utiliser la fonction ailleurs. Découvrez cet exemple ci-dessous -

import React, { useState, useEffect } de 'react' ;

fonction App() {

const [mot, setWord] = useState("Bob");

const say = () => console.log(`Votre mot est : ${word}`);

useEffet(() => {

dire();

}, [dire]);

retour <div>Bienvenue !</div> ;

}

Une autre solution consiste à implémenter le hook useCallback en enveloppant la fonction. Il est essentiel de se rappeler que la fonction useCallback nécessite un tableau de dépendances, tout comme useEffect. Si la fonction accepte des variables, les utilisateurs peuvent la transmettre avec le tableau ; ou bien laissez-le vide. Ici, comme la fonction say repose sur le mot variable, nous l'incluons dans le tableau.

importer {useState, useEffect,useCallback} de 'réagir'

fonction App(){

const [mot, setWord]=useState("Bob")

const say = useCallback(()=>console.log(`Votre mot est : ${mot}`),[mot])

useEffet(()=>{

dire()

},[dire])

retour <div>Bienvenue !</div>

}

Quand ne pas utiliser useCallBack()

Alors que useCallback() est un outil utile pour optimiser les performances dans certains scénarios, il y a aussi des moments où il est inutile ou même préjudiciable. Voici quelques exemples de cas où il ne faut pas utiliser useCallback() :

• Lorsque la fonction est transmise en tant que prop, c'est déjà une fonction pure qui ne repose pas sur un état externe.
• Lorsque la fonction est transmise en tant que prop, elle ne cause aucun problème de performances et n'est pas appelée de manière excessive.
• Lorsque la fonction est transmise en tant qu'accessoire, elle est utilisée à plusieurs endroits et doit être recréée à chaque fois pour refléter différents comportements ou dépendances.
• Lorsque la fonction est transmise en tant qu'accessoire faisant partie d'une petite arborescence de composants, le gain de performances de useCallback() serait négligeable.
• Lorsque la fonction est transmise en tant que prop, elle est utilisée comme gestionnaire d'événements et n'est appelée qu'une seule fois.

Dans ces cas, l'utilisation de useCallback() peut en fait réduire les performances en raison de la surcharge de création et de maintenance du rappel mémorisé. Il est important d'examiner attentivement chaque cas d'utilisation et de peser les avantages potentiels par rapport aux coûts potentiels avant de décider d'utiliser ou non useCallback().

Compétences en développement de logiciels à la demande

Conclusion

L'utilisation de useCallback peut être un outil puissant pour optimiser les performances de votre application React. En mémorisant les fonctions, les re-rendus inutiles peuvent être évités, conduisant à une expérience utilisateur plus fluide et plus efficace. Cependant, il est important d'utiliser useCallback judicieusement et de comprendre les scénarios lorsqu'il est le plus efficace.

upGrad propose un programme de maîtrise ès sciences en informatique qui offre une formation complète en informatique axée sur les compétences pertinentes pour l'industrie. Ce programme s'adresse à toute personne débutante ou plus expérimentée pour améliorer ses compétences en développement de logiciels. Avec ce cours, les étudiants seront plus que prêts à améliorer leur carrière dans le monde réel et à devenir des experts dans les domaines auxquels ils aspirent.