Introduction

React propose une large gamme de hooks qui nous aident à créer efficacement des applications dynamiques. Parmi ces hooks, useMemo et useCallback sont des outils essentiels pour améliorer les performances de vos composants. Bien que les deux servent un objectif similaire (éviter les recalculs ou les recréations de fonctions inutiles), ils sont adaptés à différents scénarios.

Dans cet article, nous explorerons les différences entre useMemo et useCallback, pourquoi ils sont utiles et comment les utiliser efficacement dans vos projets.

1. Qu'est-ce qu'useMemo ?

Le hook useMemo est utilisé pour mémoriser le résultat d'un calcul coûteux et ne le recalcule que lorsque ses dépendances changent. Cela vous permet d'éviter de recalculer inutilement les valeurs, ce qui est particulièrement utile pour les opérations nécessitant des coûts de calcul élevés.

• Syntaxe

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• Exemple d'utilisation

import React, { useMemo } from 'react';

function Example({ items }) {
  const total = useMemo(() => {
    return items.reduce((acc, item) => acc   item.price, 0);
  }, [items]);

  return 
Total Price: {total}
;
}

Ici, useMemo ne recalculera le total que lorsque les éléments changent, économisant ainsi des ressources si les éléments sont statiques ou rarement mis à jour.

1. À quoi sert le rappel ?

Le hook useCallback est utilisé pour mémoriser une fonction. Comme useMemo, il recalcule la fonction uniquement lorsque les dépendances changent. useCallback est particulièrement utile pour empêcher la recréation des fonctions à chaque rendu, ce qui peut être bénéfique pour les performances lors de la transmission de rappels à des composants enfants optimisés qui reposent sur l'égalité des références.

• Syntaxe

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• Exemple d'utilisation

import React, { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return ;
}

Ici, useCallback garantit que handleClick reste la même instance de fonction à moins que les dépendances ne changent, ce qui permet d'éviter de nouveaux rendus inutiles dans ChildComponent.

3. Comparaison de useMemo et useCallback

Points clés à retenir

• useMemo est utile lorsque vous souhaitez mettre en cache le résultat d'un calcul.
• useCallback est utile lorsque vous souhaitez mettre en cache une fonction pour éviter de la recréer.

4. Quand utiliser chaque crochet ?

Savoir quand utiliser useMemo et useCallback revient à comprendre les exigences de performances de votre composant et si la mémorisation fera une différence notable.

Utiliser useMemo :

• Lorsque vous avez un calcul coûteux en termes de calcul qui n'a pas besoin d'être réexécuté à chaque rendu.
• Lorsque la mémorisation de données dérivées peut aider à réduire les calculs, tels que l'agrégation de données dans de grandes listes ou l'exécution d'opérations mathématiques.

Utiliser useCallback :

• Lorsque vous transmettez une fonction en tant qu'accessoire à un composant enfant qui dépend de l'égalité des références.
• Pour éviter que des fonctions soient recréées inutilement, en particulier dans les composants haute fréquence.

5. Erreurs courantes et meilleures pratiques

• Utilisation de useMemo ou useCallback prématurément

N'abusez pas de ces crochets. La mémorisation ajoute de la complexité et, si elle n'est pas nécessaire, elle peut dégrader les performances en ajoutant une surcharge de mémoire.

• Ignorer les dépendances

Assurez-vous de répertorier correctement toutes les dépendances. Si une dépendance change mais n'est pas incluse dans le tableau, le résultat mis en cache peut être obsolète, entraînant des bugs.

• Utilisation abusive de useMemo et useCallback

Rappelez-vous : useMemo met en cache les valeurs et useCallback met en cache les fonctions. Utiliser le mauvais hook peut entraîner un comportement inattendu et des bugs.

• Éviter les pièges de la remémorisation

Les fonctions et valeurs mémorisées ne seront mises à jour que si les dépendances changent. Pour éviter les nouveaux rendus inutiles, assurez-vous que le tableau de dépendances inclut uniquement des variables qui affectent réellement le résultat ou la logique de la fonction.

Conclusion

useMemo et useCallback sont tous deux des outils puissants pour optimiser vos applications React. En mise en cache calculs avec useMemo et fonctions avec useCallback, vous pouvez améliorer les performances , en particulier dans les applications comportant des calculs lourds ou des composants dont le rendu est fréquent.

Bien que ces crochets soient utiles, il est essentiel de les utiliser à bon escient. En appliquant useMemo et useCallback de manière stratégique, vous pouvez garantir que vos applications React restent rapides et réactives.