Kako preprečite, da spremembe stanja povzročijo preveliko število ponovnih prikazov?

Question

Accepted Answer

Spremembe stanja sprožijo ponovne prikaze, in slabo strukturirano stanje lahko povzroči **bistveno več ponovnega prikazovanja, kot je potrebno** — kar upočasni aplikacijo. Ključne strategije: ozko naročanje, razdelitev stanja, memoizacija in lokalno shranjevanje stanja. ## 1. Naročite se na najmanjši delec, ki ga potrebujete ```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); ``` Selektivna naročila (Zustand/Redux selektorji, Jotai atomi) so največja razlika — komponente se ponovno prikažejo le, ko se njihov specifičen delec spremeni, ne pa pri vsaki posodobitvi shramba. ## 2. Razdelite stanje / kontekst, da omejite doseg vpliva ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoizirajte komponente in 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 ``` Memoizacija preprečuje ponovno prikaz otrok, ko se njihove lastnosti (po referenci) niso spremenile — vendar deluje le, če tudi ohranite lastnosti/povratne klice referenčno stabilne (zato `useCallback`/`useMemo`) in posodobite stanje **nespremenljivo**. ## 4. Ohranite stanje čim bolj lokalno ```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 shranjujte izpeljanih vrednosti; izogibajte se novim referencam pri vsakem prikazu ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Uporabite memoizirane selektorje za izpeljane 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 ``` ## Najprej izmerite ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Zakaj je to pomembno Prekomerni ponovni prikazi so vodilni vzrok počasnih React/stanj-voženih aplikacij in izhajajo iz tega, kako je stanje strukturirano in kako se ga naročamo. Orodjaren — ozka selektivna naročila, razdeljena konteksta, memoizacija s stabilnimi referencami, nespremenljive posodobitve in lokalizacija stanja — neposredno nadzoruje obseg ponovnega prikazovanja. Ključno je, da **izmerite** (Profiler), da poiščete pravo ozko grlo, preden optimizirate, saj neprevidna memoizacija dodaja kompleksnost brez koristi. Razumevanje tega, kaj sproži ponovne prikaze in kako jih zajeziti, je bistvenega pomena za zmogljive velike aplikacije.