Hur håller du tillståndsuppdateringar från att orsaka överdrivna omrenderingar?

Question

Accepted Answer

Tillståndsändringar utlöser omrenderingar, och dåligt strukturerat tillstånd kan orsaka **långt fler omrenderingar än nödvändigt** — vilket saktar ned appen. Nyckelstrategierna är: prenumerera snävt, dela upp tillståndet, memoizera och håll tillståndet lokalt. ## 1. Prenumerera på det minimala utsnitt du behöver ```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); ``` Selektiva prenumerationer (Zustand/Redux-väljare, Jotai-atomer) är den enskilt största hävstången — komponenter omrenderas endast när deras specifika utsnitt ändras, inte vid varje butiksuppdatering. ## 2. Dela upp tillstånd / context för att begränsa effektomfattningen ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoizera komponenter och värden ```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 ``` Memoizering förhindrar barn från att omrenderas när deras props (efter referens) inte har ändrats — men det fungerar endast om du också håller props/callbacks referentiellt stabila (därav `useCallback`/`useMemo`) och uppdaterar tillståndet **omvändbart**. ## 4. Håll tillståndet så lokalt som möjligt ```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. Lagra inte härledda värden; undvik nya referenser varje render ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Använd memoizerade väljare för härledda 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ät först ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Varför det spelar roll Överdrivna omrenderingar är en ledande orsak till långsamma React/tillståndsbaserade appar, och de härrör från hur tillståndet är strukturerat och prenumererat på. Toolkiten — snäva selektiva prenumerationer, delade contexts, memoizering med stabila referenser, omöjliga uppdateringar och lokalisering av tillståndet — kontrollerar direkt omrenderingsomfattningen. Avgörande är att du bör **mäta** (Profiler) för att hitta den verkliga flaskhalsen innan du optimerar, eftersom slösaktig memoizering ökar komplexiteten utan nytta. Att förstå vad som utlöser omrenderingar och hur man innehåller dem är väsentligt för prestandaoptimerade appar i stor skala.