Comment éviter que les mises à jour d'état ne causent un rendu excessif ?

Question

Accepted Answer

Les changements d'état déclenchent des re-rendus, et un état mal structuré peut causer **bien plus de re-rendus que nécessaire** — ralentissant l'application. Les stratégies clés : s'abonner étroitement, diviser l'état, mémoriser, et garder l'état local. ## 1. S'abonner à la tranche minimale dont vous avez besoin ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` Les abonnements sélectifs (sélecteurs Zustand/Redux, atomes Jotai) sont le plus grand levier — les composants ne se re-rendent que quand leur tranche spécifique change, pas à chaque mise à jour du store. ## 2. Diviser l'état / contexte pour limiter le rayon de blast ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Mémoriser les composants et les valeurs ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` La mémorisation empêche les enfants de se re-rendre quand leurs props (par référence) n'ont pas changé — mais cela ne fonctionne que si vous gardez également les props/callbacks référentiellement stables (d'où `useCallback`/`useMemo`) et mettez à jour l'état **immuablement**. ## 4. Garder l'état aussi local que possible ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. Ne pas stocker les valeurs dérivées ; éviter les nouvelles références à chaque rendu ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Utiliser des sélecteurs mémorisés pour les données dérivées ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## Mesurez d'abord ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Pourquoi c'est important Les re-rendus excessifs sont une cause majeure des applications React/pilotées par l'état qui sont lentes, et ils découlent de la façon dont l'état est structuré et auquel on s'abonne. La boîte à outils — abonnements sélectifs étroits, contextes divisés, mémorisation avec des références stables, mises à jour immuables, et localisation de l'état — contrôle directement la portée du re-rendu. Crucial : vous devriez **mesurer** (Profiler) pour trouver le vrai goulot d'étranglement avant d'optimiser, car la mémorisation sans réfléchir ajoute de la complexité sans bénéfice. Comprendre ce qui déclenche les re-rendus et comment les contenir est essentiel pour des applications à grande échelle performantes.