D'abord mesurez, puis corrigez la véritable cause — ne semez pas useMemo partout au hasard.
Utilisez le React DevTools Profiler (activez "Highlight updates when components render"). Il montre quels composants ont été re-rendus et pourquoi (les props ont changé, l'état a changé, le composant parent a été rendu, le contexte a changé).
1. Nouvelles props object/array/function à chaque rendu contournent React.memo :
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. La valeur du contexte est recréée à chaque rendu → tous les consommateurs sont re-rendus. Memoïsez le value ou divisez les contextes.
3. État placé trop haut. Abaisser l'état afin que moins de composants en dépendent est souvent la plus grande victoire :
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Travail coûteux dans le rendu → enrobez-le dans useMemo.
Les re-rendus sont généralement peu coûteux — React est rapide. La plupart des "optimisations" ajoutent de la complexité sans bénéfice mesurable. Préférez les correctifs structurels (colocalisation de l'état, virtualisation de liste pour des milliers de lignes) à la dissémination de memos partout. Optimisez les points chauds spécifiques que le profileur révèle, et mesurez à nouveau pour confirmer que la correction a réellement aidé.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don