Hook useMemo

Le hook useMemo nous permet de mémoriser le résultat d'une fonction, optimisant ainsi les calculs coûteux en mettant en cache le résultat. Il est avantageux lorsque nous avons des calculs fréquents et gourmands en ressources qui donnent le même résultat lorsque les données ne changent pas. Cela élimine le besoin de recalculs redondants, ce qui améliore les performances.

Syntaxe :

Nous déclarons une nouvelle variable, telle que cachedValue, et l'assignons au hook useMemo. À l'intérieur des parenthèses du hook, nous fournissons une fonction (par exemple, calculateValue), qui sera exécutée pour calculer la valeur mémorisée. Cette fonction peut être n'importe quelle fonction JavaScript valide. De plus, nous incluons un deuxième argument—un tableau appelé dependencies—qui consiste en les valeurs sur lesquelles la valeur mémorisée repose.

Lorsque l'une des dépendances spécifiées dans le tableau dependencies change, la valeur mémorisée sera recalculée. Cependant, si les dépendances restent les mêmes entre les rendus, React renverra la valeur précédemment calculée sans recomputation.

Remarque

Cette optimisation aide à améliorer les performances en évitant les calculs inutiles et résulte en une expérience utilisateur plus efficace.

Exemple 1

Créons le composant ShoppingCart, qui stockera les informations sur le nombre de produits sélectionnés par l'utilisateur. De plus, il gérera la logique pour calculer la somme totale, indiquant le montant que l'utilisateur doit payer. Notre objectif principal est de mémoriser la somme totale et de la recalculer uniquement lorsque l'utilisateur modifie la prop products passée à ce composant.

Le calcul du totalPrice est effectué dans le hook useMemo, ce qui empêche un recalcul inutile à chaque re-rendu du composant.

Explication ligne par ligne :

• Ligne 1 : Nous importons le hook useMemo de la bibliothèque React pour tirer parti de sa fonctionnalité ;
• Ligne 3 : Le composant ShoppingCart est défini en utilisant la syntaxe de fonction conventionnelle ;
• Ligne 4-10 : Nous créons la variable totalPrice responsable du prix total que l'utilisateur doit payer. Le hook useMemo est utilisé pour ne pas effectuer de calculs à chaque rendu ;
  • Ligne 5-9 : Dans la fonction fléchée passée à useMemo, la logique de calcul de la somme totale est implémentée. Chaque élément du tableau products est itéré, et le prix est multiplié par la quantité et ajouté à la variable somme ;
  • Ligne 10 : Le tableau de dépendances [products] est fourni au hook useMemo. Cela indique que la valeur mémorisée doit être recalculée si le tableau products change.
• Lignes 12-31 : Le balisage du composant est rendu.
  1. Ligne 16 : La méthode map est utilisée pour rendre chaque produit dans le tableau products, créant un élément JSX correspondant ;
  2. Ligne 17 : L'attribut key est défini pour assurer un rendu efficace des éléments du tableau et aider React à identifier chaque élément de manière unique ;
  3. Ligne 28 : La valeur de la variable totalPrice est rendue dans le JSX, affichant le prix total calculé.

Code complet de l'application :

Remarque

Il est conseillé de ne pas mélanger les hooks useEffect et useMemo pour garantir la clarté et éviter toute confusion. La distinction clé réside dans leurs objectifs respectifs : useEffect est utilisé pour gérer les effets secondaires et le cycle de vie des composants, tandis que useMemo mémorise les calculs coûteux pour améliorer les performances.