Hogyan akadályozod meg, hogy az állam frissítése túlzott újrarendezést okozzon?

Question

Accepted Answer

Az állapotváltozások újrarendezést indítanak el, és a rosszul strukturált állapot **sokkal több újrarendezést okozhat, mint szükséges** — lelassítva az alkalmazást. A fő stratégiák: szűk feliratkozás, állapot felosztása, memorizálás és az állapot helyi megtartása. ## 1. Iratkozz fel a szükséges minimális szelethez ```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); ``` A szelektív feliratkozások (Zustand/Redux szelektorok, Jotai atomok) az egyetlen legnagyobb eszköz — az összetevők csak akkor rendeződnek újra, amikor az adott szeletük megváltozik, nem pedig az összes tárfrissítéskor. ## 2. Oszd meg az állapotot / kontextust a robbantási sugár korlátozásához ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memorizáld az összetevőket és az értékeket ```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 ``` A memorizálás megakadályozza, hogy a gyermekek újra megjelenjenek, ha a prop-jaik (hivatkozás szerint) nem változtak — de csak akkor működik, ha a prop-okat/callback-eket referenciatartó stabilnak tartod (ezért `useCallback`/`useMemo`) és az állapotot **megváltoztathatatlanul** frissíted. ## 4. Tartsd az állapotot a lehető leglokalizebbé ```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 tárolj származtatott értékeket; kerüld az új hivatkozásokat mindegyik rendereléskor ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Használj memorizált szelectorokat a szamtatott adatokhoz ```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 ``` ## Először mérd meg ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Miért fontos A túlzott újrarendezés a lassú React/állapot-vezérelt alkalmazások vezető oka, és az állapot strukturálásának és feliratkozásának módjából származik. Az eszköztár — szűk szelektív feliratkozások, megosztott kontextusok, stabil hivatkozásokkal végzett memorizálás, megváltoztathatatlan frissítések és az állapot lokalizálása — közvetlenül szabályozza az újrarendezés terjedelmét. Döntő fontosságú, hogy az optimalizálás előtt **mérj** (Profiler), hogy megtaláld az igazi szűk keresztmetszetet, mivel a gondatlan memorizálás bonyolultságot ad hozzá haszon nélkül. Annak megértése, hogy mi indít újrarendezést és hogyan lehet azt korlátozni, alapvető fontosságú a nagy léptékű, nagy teljesítményű alkalmazásokhoz.