Le hook useMemo 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 des calculs fréquents et gourmands en ressources produisent le même résultat tant que les données ne changent pas. Cela élimine la nécessité de recalculs redondants, ce qui améliore les performances.

Syntaxe :

On déclare une nouvelle variable, telle que cachedValue, et on l'assigne au hook useMemo. À l'intérieur des parenthèses du hook, on fournit 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, on inclut un second argument — un tableau appelé dependencies — qui contient les valeurs dont dépend la valeur mémorisée.

const cachedValue = useMemo(calculateValue, dependencies)

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 identiques entre les rendus, React retournera la valeur précédemment calculée sans nouveau calcul.

Note

Cette optimisation permet d'améliorer les performances en évitant les calculs inutiles et offre une expérience utilisateur plus efficace.

Exemple 1

Création du composant ShoppingCart, qui stocke les informations concernant le nombre de produits sélectionnés par l'utilisateur. Ce composant gère également la logique de calcul du montant total, indiquant la somme que l'utilisateur doit payer. L'objectif principal est de mémoriser le montant total et de le recalculer uniquement lorsque la prop products transmise à ce composant est modifiée.

import React, { useMemo } from "react";

const ShoppingCart = ({ products }) => {
  const totalPrice = useMemo(() => {
    let sum = 0;
    for (const item of products) {
      sum += item.price * item.quantity;
    }
    return sum;
  }, [products]);

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {products.map(({ id, name, price, quantity }) => (
          <li key={id}>
            <p>
              <span>{name} -</span>
              <span>
                ${price} x {quantity}
              </span>
            </p>
          </li>
        ))}
      </ul>
      <h3>
        Total Price: <span>${totalPrice}</span>
      </h3>
    </div>
  );
};

Le calcul de la variable totalPrice est effectué à l'intérieur du hook useMemo, ce qui évite un recalcul inutile à chaque re-rendu du composant.

Explication ligne par ligne :

• Ligne 1 : Importation du hook useMemo depuis la bibliothèque React pour bénéficier de sa fonctionnalité ;
• Ligne 3 : Définition du composant ShoppingCart en utilisant la syntaxe fonctionnelle conventionnelle ;
• Lignes 4-10 : Création de la variable totalPrice responsable du montant total à payer par l'utilisateur. Le hook useMemo est utilisé pour éviter d'effectuer les calculs à chaque rendu ;
  • Lignes 5-9 : À l'intérieur de la fonction fléchée transmise à useMemo, la logique de calcul du sum total est implémentée. Chaque élément du tableau products est parcouru, le prix est multiplié par la quantity puis ajouté à la variable sum ;
  • 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 : Rendu du balisage du composant.

1. Ligne 16 : Utilisation de la méthode map pour afficher chaque produit du tableau products, créant un élément JSX correspondant ;
2. Ligne 17 : L'attribut key est défini afin d'assurer un rendu efficace des éléments du tableau et d'aider React à identifier chaque élément de manière unique ;
3. Ligne 28 : La valeur de la variable totalPrice est affichée dans le JSX, montrant le montant total calculé.

Code complet de l'application :

Remarque

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