Come eviti che gli aggiornamenti dello stato causino troppi re-render?

Question

Accepted Answer

I cambiamenti di stato attivano i re-render, e uno stato mal strutturato può causare **molti più re-render del necessario** — rallentando l'app. Le strategie chiave: sottoscrivere in modo selettivo, dividere lo stato, memoizzare e mantenere lo stato locale. ## 1. Sottoscriviti alla sezione minima di cui hai bisogno ```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); ``` Le sottoscrizioni selettive (selettori Zustand/Redux, atomi Jotai) sono la leva più importante — i componenti si re-renderizzano solo quando la loro sezione specifica cambia, non ad ogni aggiornamento dello store. ## 2. Dividi stato / context per limitare il raggio di esplosione ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoizza componenti e valori ```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 memoizzazione evita che i figli si re-renderizzino quando le loro props (per riferimento) non sono cambiate — ma funziona solo se mantieni anche le props/callback referenzialmente stabili (da qui `useCallback`/`useMemo`) e aggiorni lo stato **immutabilmente**. ## 4. Mantieni lo stato il più locale possibile ```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. Non conservare valori derivati; evita nuovi riferimenti ad ogni render ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Usa selettori memoizzati per i dati derivati ```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 ``` ## Misura prima ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Perché è importante I re-render eccessivi sono una delle cause principali di app React/state-driven lente, e derivano da come lo stato è strutturato e sottoscritto. Il toolkit — sottoscrizioni selettive strette, context divisi, memoizzazione con riferimenti stabili, aggiornamenti immutabili e localizzazione dello stato — controlla direttamente l'ambito dei re-render. Crucialmente, dovresti **misurare** (Profiler) per trovare il vero collo di bottiglia prima di ottimizzare, poiché la memoizzazione sconsiderata aggiunge complessità senza benefici. Comprendere cosa attiva i re-render e come contenerli è essenziale per app su larga scala performanti.