Kako zaustaviti ažuriranja stanja od uzrokovanja prekomernog ponovnog crtanja?

Question

Accepted Answer

Promene stanja pokrenuju ponovno crtanje, a loše strukturirano stanje može uzrokovati **daleko više ponovnog crtanja nego što je potrebno** — usporavajući aplikaciju. Ključne strategije: pretplatite se na minimalnu količinu, podelite stanje, memorizirajte i čuvajte stanje lokalno. ## 1. Pretplatite se na minimalnu grupu koju vam trebate ```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); ``` Selektivne pretplate (Zustand/Redux selektori, Jotai atomi) su najveće poluge — komponente se ponovo crtaju samo kada se njihova specifična grupa izmeni, a ne pri svakom ažuriranju skladišta. ## 2. Podelite stanje / kontekst kako biste ograničili radijus eksplozije ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memorizirajte komponente i vrednosti ```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 ``` Memorizacija sprečava decu da se ponovo crtaju kada se njihova svojstva (po referenci) nisu promenila — ali radi samo ako čuvate svojstva/callback-ove u referencijalnoj stabilnosti (otuda `useCallback`/`useMemo`) i ažurirate stanje **nepromenjivo**. ## 4. Čuvajte stanje što je moguće lokalnije ```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. Nemojte skladištiti izvedene vrednosti; izbegavajte nove reference pri svakom crtanju ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Koristite memorizirane selektore za izvedene podatke ```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 ``` ## Prvo izmerimo ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Zašto je to važno Prekomerno ponovno crtanje je vodeći uzrok spora React/stanje-vođenih aplikacija, a potiče iz načina strukturiranja stanja i pretplaćivanja na njega. Toolkit — uske selektivne pretplate, podeljeni konteksti, memorizacija sa stabilnim referencama, nepromenljiva ažuriranja, i lokalizacija stanja — direktno kontroliše obim ponovnog crtanja. Najvažnije je da biste prvo **izmerili** (Profiler) kako biste pronašli pravi problem pre optimizacije, pošto neoprezna memorizacija dodaje kompleksnost bez koristi. Razumevanje onoga što pokreće ponovno crtanje i kako ga ograničiti je bitno za performantne aplikacije velikog obima.