Miten estät tilamuutokset aiheuttamasta liiallisia uudelleenpiirtoja?

Question

Accepted Answer

Tilamuutokset laukaisevat uudelleenpiirrön, ja huonosti strukturoitu tila voi aiheuttaa **paljon enemmän uudelleenpiirrosta kuin tarpeen** — hidastaen sovellusta. Tärkeät strategiat: valikoitu tilaus, tilan jakaminen, memointi, ja tilan pitäminen paikallisena. ## 1. Tilaa vain minimi, jota tarvitset ```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); ``` Valikoivat tilaukset (Zustand/Redux selectors, Jotai atoms) ovat yksittäin suurin vipuvaikutus — komponentit piirretään uudelleen vain kun niiden tietty viipale muuttuu, ei jokaisen store-päivityksen yhteydessä. ## 2. Jaa tila / konteksti vaikutusalueen rajoittamiseksi ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Muista komponentit ja arvot ```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 ``` Memointi estää lapsia uudelleenpiirrosta kun niiden propsit (viitteen mukaan) eivät ole muuttuneet — mutta se toimii vain jos pidät myös propsit/callback-funktiot referentiaalisesti vakaina (`useCallback`/`useMemo`) ja päivität tilan **muuttumattomasti**. ## 4. Pidä tila mahdollisimman paikallisena ```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. Älä tallenna johdettuja arvoja; vältä uusia viitteitä jokaisessa piirannossa ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Käytä muistettuja selektoreita johdetuille tiedoille ```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 ``` ## Mittaa ensin ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Miksi se on tärkeää Liiallinen uudelleenpiirrto on johtava syy hitaiden React/tila-ohjaavien sovellusten taustalla, ja se johtuu siitä kuinka tila on rakennettu ja kuinka siihen tilataan. Työkalujoukko — valikoivat tilaukset, jaetut kontekstit, memointi vakailla viitteillä, muuttumattomia päivityksiä, ja tilan paikantaminen — kontrolloi suoraan uudelleenpiirrön laajuutta. Ratkaisevasti sinun pitää **mitata** (Profiler) löytääksesi todellisen pullonkaulan ennen optimointia, koska välinpitämätön memointi lisää monimutkaisuutta hyödyttä antamatta. Ymmärtäminen siitä mitä laukaisee uudelleenpiirrön ja kuinka sitä rajoittaa on olennaista suurissa, suorituskykyisissä sovelluksissa.