Vous devez avoir entendu cela très souvent que nous devrions mémoriser les fonctions de rappel en utilisant useCallback() pour éviter un nouveau rendu inutile des composants.

Mais qu'est-ce exactement que useCallback() 🤔 . Y avez-vous déjà pensé ?

Laissez-moi vous aider à comprendre ce que c'est et où l'utiliser correctement.

Commençons par comprendre les contrôles d'égalité des fonctions

Avant de voir comment nous l'utilisons, voyons ce qu'il résout. Écrivons une fonction simple qui renvoie une fonction :

mul1 et mul2 sont des fonctions qui multiplient deux nombres. Ils ont été créés par la fonction de multiplication .

Les fonctions en JavaScript sont l'objet normal. Les fonctions mul1 et mul2 partagent le même code mais ce sont des objets fonction différents. En les comparant, ils sont évalués à false .

C'est ainsi que fonctionnent les objets JavaScript. Un objet (y compris un objet fonction) n'est égal qu'à lui-même.

Maintenant Le but de useCallback()

React.useCallback() résout fondamentalement le contrôle d'égalité des fonctions que nous avons vu ci-dessus. Différents objets fonction partageant le même code sont souvent créés dans les composants React :

handleClick (fonction en ligne) est un objet de fonction différent sur chaque rendu de CustomComponent .

Et il n'y a aucun mal à avoir des fonctions déclarées en ligne avec React Components. Cela n'aura pas d'impact préjudiciable sur les performances.

Mais dans certains cas, vous devez conserver une seule instance de fonction entre les rendus :

1. Comme lorsque la fonction a un état interne, par exemple lorsque la fonction est anti-rebond/étranglée

2. Un composant fonctionnel enveloppé à l'intérieur React.memo()accepte un objet fonction prop.

Si un composant enfant qui accepte un rappel s'appuie sur une vérification d'égalité référentielle (par exemple : React.memo() ou shouldComponentUpdate() ) pour éviter les re-rendus inutiles lorsque ses accessoires changent, il est alors important qu'aucun accessoire de rappel ne change entre rend.

Par conséquent, dans le composant parent, nous pouvons envelopper la prop de rappel dans useCallback() et garantir qu'il transmet le même objet fonction dans le composant enfant optimisé.

3. Lorsque l'objet fonction est une dépendance à d'autres crochets, par exemple useEffect(..., [callback])

Dans l'exemple ci-dessus, si myFunction fait quelque chose qui provoque la reconstruction de MyComponent (par exemple, s'il fait quelque chose qui change les accessoires ou l'état), vous vous retrouverez dans un état de boucle infinie.

Pour éviter cela, nous enveloppons useCallback() autour d'une fonction et définissons ses dépendances pour garantir que la fonction n'est recréée que si ses dépendances ont changé. Par conséquent, la fonction n'est plus déclarée à chaque cycle de rendu

Les cas d'utilisation ci-dessus sont donc quand, le hook useCallback est utile : étant donné les mêmes valeurs de dépendance, le hook renvoie la même instance de fonction entre les rendus et augmente les performances.

J'espère que cela vous a aidé à comprendre ce qu'est en fait useCallback() ! 😊

Merci d'avoir lu cet article. Si vous l'avez apprécié, n'hésitez pas à cliquer sur le bouton 👏 pour aider les autres à le trouver.