React.memo

React 🟡 Mid

Definition

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

Analogie

Comme un videur de boite de nuit qui ne laisse passer que les nouvelles tetes : memes 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

Composants enfants couteux qui re-rendent inutilement a cause du re-rendu du parent.

Anti-pattern

Utiliser React.memo sur tous les composants sans mesurer : le cout de comparaison peut depasser le gain.

Termes lies

#performance#interview