Jak zabráníte aktualizacím stavu v tom, aby způsobily nadměrné překreslení?

Question

Accepted Answer

Změny stavu spouštějí překreslení a špatně strukturovaný stav může způsobit **mnohem více překreslení než nutné** — zpomaluje aplikaci. Klíčové strategie: přihlášení se na minimum, rozdělení stavu, memoizace a zachování stavu v lokálním rozsahu. ## 1. Přihlaste se na minimum, které potřebujete ```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); ``` Selektivní odběry (Zustand/Redux selektory, Jotai atomy) jsou jedním z největších páček — komponenty se překreslují pouze když se změní jejich konkrétní řez, ne s každou aktualizací store. ## 2. Rozdělte stav / context, aby se omezil rozsah dopadu ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoizujte komponenty a hodnoty ```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 ``` Memoizace brání překreslení podřízených prvků, když se jejich props (podle odkazu) nezměnily — ale funguje to pouze pokud také udržujete props/callbacks referenčně stabilní (`useCallback`/`useMemo`) a aktualizujete stav **immutably**. ## 4. Udržujte stav co nejvíce lokální ```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. Neukládejte odvozené hodnoty; vyvarujte se nových odkazů v každém překreslení ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Používejte memoizované selektory pro odvozená 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 ``` ## Nejdříve změřte ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Proč je to důležité Nadměrné překreslení je hlavní příčinou pomalých React/state-driven aplikací a vyplývá z toho, jak je stav strukturován a na co se přihlašujete. Sada nástrojů — úzké selektivní odběry, rozdělené kontexty, memoizace se stabilními odkazy, immutable aktualizace a lokalizace stavu — přímo řídí rozsah překreslení. Klíčově byste měli **měřit** (Profiler), abyste před optimalizací našli skutečné úzké místo, protože bezohledná memoizace zvyšuje složitost bez přínosu. Porozumění tomu, co spouští překreslení a jak je obsahovat, je zásadní pro výkonné aplikace ve velkém měřítku.