useMemo

React 🟡 Mid

Définition

Hook qui memoize le résultat d'un calcul coûteux et ne le recalcule que si ses dépendances changent.

Analogie

Comme mettre un plat au frigo : tu ne recuisines pas si les ingrédients n'ont pas change, tu ressers le même plat.

Exemple de code

const sortedItems = useMemo(
  () => items.sort((a, b) => a.price - b.price),
  [items]
);
// Ne retrie que si 'items' change

Cas d'usage

Calculs coûteux (tri, filtrage) recalculés à chaque rendu. Avec React Compiler 1.0 (7 octobre 2025), ces mémoïsations sont insérées automatiquement au build : useMemo manuel reste une porte de sortie, plus une obligation.

Anti-pattern

Mémoïser par réflexe des opérations triviales : coût supérieur au recalcul, et redondant avec le compilateur.

Termes liés

#hooks#interview#performance

En entretien

Explique-moi ce que fait useMemo.
Il mémoïse le résultat d'un calcul coûteux et ne le recalcule que si ses dépendances changent, comme mettre un plat au frigo plutôt que de recuisiner à chaque fois. On l'utilise pour des calculs coûteux comme un tri ou un filtrage recalculés à chaque rendu.
Est-ce qu'il faut encore l'utiliser partout aujourd'hui ?
Non, mémoïser par réflexe des opérations triviales coûte plus cher que le recalcul, et depuis React Compiler 1.0 (7 octobre 2025) ces mémoïsations sont insérées automatiquement au build. useMemo manuel reste une porte de sortie, plus une obligation.

Sources

react.dev/blog/2025/10/07/react-compiler-1

Fiche mise à jour le 2026-09-27