Cum previi actualizările de stare să nu provoace re-randări excesive?

Question

Accepted Answer

Modificările de stare declanșează re-randări, iar starea structurată defect poate cauza **mult mai multe re-randări decât este necesar** — încetinind aplicația. Strategiile cheie: abonare selectivă, împărțire stare, memoizare și menținere stare locală. ## 1. Abonare-te la feliuța minimă de care ai nevoie ```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); ``` Abonările selective (selectori Zustand/Redux, atomi Jotai) sunt cea mai mare pârghie — componentele se re-randează numai când se schimbă felisele lor specifice, nu la fiecare actualizare a magazinului. ## 2. Împarte starea / contextul pentru a limita raza de acțiune ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoizează componentele și valorile ```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 ``` Memoizarea previne re-randarea copiilor când accesoriile lor (după referință) nu s-au schimbat — dar funcționează doar dacă menții și accesoriile/callback-urile referențial stabile (deci `useCallback`/`useMemo`) și actualizezi starea **imuabil**. ## 4. Menține starea cât mai locală cu putință ```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. Nu stoca valori derivate; evită referințe noi la fiecare randare ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Folosește selectori memoizați pentru date derivate ```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 ``` ## Măsoară mai întâi ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## De ce este important Re-randările excesive sunt o cauză principală a aplicațiilor React/state-driven lente, și provin din modul în care starea este structurată și abonată. Toolkit-ul — abonări selective înguste, contexte împărțite, memoizare cu referințe stabile, actualizări imuabile și localizarea stării — controlează direct domeniul de re-randare. Important, trebuie să **măsori** (Profiler) pentru a găsi adevăratul blocaj înainte de a optimiza, deoarece memoizarea necăzută adaugă complexitate fără beneficiu. Înțelegerea a ceea ce declanșează re-randările și cum să le conții este esențială pentru aplicații de mare scară performante.