Que fait React.memo et quand est-il judicieux de l'utiliser?

Question

Accepted Answer

`React.memo` enveloppe un composant pour qu'il **ignore le re-rendu lorsque ses props sont shallow-equal avec le rendu précédent**. Par défaut, un composant enfant se re-rend à chaque fois que son parent se re-rend; `memo` court-circuite cela lorsque les props n'ont pas réellement changé. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## Pourquoi c'est important `memo` effectue une comparaison **shallow**. Si le parent transmet un nouvel objet/tableau/fonction à chaque rendu, la comparaison échoue toujours et `memo` ne fait rien: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Corrigez en stabilisant la fonction avec `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Quand c'est judicieux - Un composant se rend **souvent** avec les **mêmes** props et son rendu n'est pas trivial (grandes listes, sous-arbres coûteux). ## Quand ce ne l'est pas - La plupart des composants sont peu coûteux; la comparaison elle-même a un coût, et envelopper tout ajoute de la complexité sans bénéfice. **Profilez d'abord** avec le Profiler React DevTools, puis mémoïsez les points chauds avérés — ne mémoïsez pas à l'aveugle.