React.memo

React 🟡 Mid

Définition

HOC qui memoize un composant : il ne se re-rend que si ses props changent (comparaison shallow par défaut).

Analogie

Comme un videur de boite de nuit qui ne laisse passer que les nouvelles têtes : mêmes props = on ne re-rend pas.

Exemple de code

const ExpensiveList = React.memo(function List({ items }) {
  return items.map(i => <Item key={i.id} {...i} />);
});

// Avec comparateur custom
const MemoComp = React.memo(Comp, (prev, next) => {
  return prev.id === next.id;
});

Cas d'usage

Composant enfant coûteux re-rendu inutilement à cause du parent. Depuis React Compiler 1.0 (7 octobre 2025), la mémoïsation est automatique dans les projets compilés : React.memo devient une soupape manuelle, utile surtout hors compilateur ou pour un contrôle explicite.

Anti-pattern

Envelopper tous les composants sans mesurer : le coût de comparaison peut dépasser le gain, et le compilateur rend l'exercice redondant.

Termes liés

#performance#interview

En entretien

Explique-moi ce que fait React.memo.
C'est un HOC qui mémoïse un composant : il ne se re-rend que si ses props changent, avec une comparaison shallow par défaut, comme un videur qui ne laisse passer que les nouvelles têtes. On l'utilise pour un composant enfant coûteux re-rendu inutilement à cause du parent.
Est-ce que React.memo est toujours utile aujourd'hui ?
Depuis React Compiler 1.0 (7 octobre 2025), la mémoïsation est automatique dans les projets compilés, donc React.memo devient une soupape manuelle plutôt qu'un réflexe. L'anti-pattern est d'en envelopper tous les composants sans mesurer : le coût de comparaison peut dépasser le gain, et c'est redondant avec le compilateur.

Sources

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

Fiche mise à jour le 2026-09-27