Bonjour à tous 👋, j'espère que vous allez bien 😊.
Donc, aujourd'hui, vous allez apprendre tous les concepts de base de useCallback Accrochez-vous à cet article.
Avant de commencer, il y a quelques règles que vous devez suivre pour utiliser Hooks 😟. Heureusement, l'équipe React a fourni un plugin ESLint appelé eslint-plugin-react-hooks qui applique ces règles lors de l'utilisation de Hooks 🤩.
useCallback Hook
Le useCallback Hook renvoie un rappel mémorisé.
Le useCallback Hook prend deux arguments. Le premier argument est un rappel et le second un tableau de dépendances. Le useCallback Hook renvoie une version mémorisée du rappel qui ne change que si l'une des dépendances change.
Le useCallback Hook est utile lors de la transmission des rappels pour optimiser les composants enfants lorsqu'ils reposent sur l'égalité des références pour éviter les rendus inutiles.
Vous pouvez fournir un tableau vide comme deuxième argument du useCallback fonction.
Fonction React.memo
Le React.memo fonctionne de manière similaire à un composant fonctionnel comme pureComponent au composant de classe. La différence est qu'il ignorera le rendu du composant de fonction lorsque les accessoires actuels sont égaux aux anciens.
Le React.memo fonction qui prend un composant fonctionnel comme argument et renvoie un composant de fonction.
Par défaut, React.memo comparaison superficielle d'objets complexes dans les accessoires.
Type primitif
Type d'objet
Exemple
Dans cet exemple, nous avons corrigé le problème survenu dans l'article précédent.
Avant de terminer cet article, je tiens à mentionner que vous ne pouvez pas archiver le même comportement à l'aide de useState Crochet à cause du useState Hook renvoie une nouvelle fonction setter à chaque rendu.
Maintenant, vous avez appris tous les concepts de base de useCallback Crochet 🤘.
Merci d'avoir lu! Je m'appelle Bipin Rajbhar; J'aime aider les gens à acquérir de nouvelles compétences 😊. Vous pouvez me suivre sur Twitter si vous souhaitez être informé des nouveaux articles et ressources.