Hvordan hindrer du at tilstandsoppdateringer forårsaker overdrevne re-rendringer?

Question

Accepted Answer

Tilstandsendringer utløser re-rendringer, og dårlig strukturert tilstand kan forårsake **langt mer re-rendering enn nødvendig** — noe som bremser appen. Nøkkelstrategiene er: abonner snevert, splitt tilstand, memoisér, og hold tilstand lokal. ## 1. Abonner på det minste skjæringspunktet du trenger ```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); ``` Selektive abonnementer (Zustand/Redux-selektorer, Jotai-atomer) er den største løftestangen — komponenter re-rendres bare når deres spesifikke skjæringspunkt endres, ikke ved hver lageropdatering. ## 2. Splitt tilstand / kontekst for å begrense påvirkningsradius ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoisér komponenter og verdier ```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 ``` Memoiserering hindrer barn i å re-rendres når deres props (ved referanse) ikke har endret seg — men det fungerer bare hvis du også holder props/callbacks referensielt stabile (derav `useCallback`/`useMemo`) og oppdaterer tilstand **immutabelt**. ## 4. Hold tilstand så lokal som mulig ```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. Lagre ikke avledede verdier; unngå nye referanser hver rendering ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Bruk memoiserte selektorer for avledede data ```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ål først ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Hvorfor det er viktig Overdrevne re-rendringer er en ledende årsak til treg React/tilstand-drevne apper, og de stammer fra hvordan tilstand er strukturert og abonnert på. Verktøykassen — snevre selektive abonnementer, splitt kontekster, memoiserering med stabile referanser, immutable oppdateringer, og lokalisering av tilstand — kontrollerer direkte re-rendering-omfanget. Kritisk sett bør du **måle** (Profiler) for å finne den virkelige flaskehalsen før du optimiserer, siden tankeløs memoiserering legger til kompleksitet uten fordel. Å forstå hva som utløser re-rendringer og hvordan du inneholder dem, er essensielt for ytelsessterke apper i stor skala.