Jak zapobiegać temu, aby aktualizacje stanu powodowały nadmierne renderowania?

Question

Accepted Answer

Zmiany stanu wyzwalają renderowania, a źle ustrukturyzowany stan może powodować **znacznie więcej renderowań niż to konieczne** — spowalniając aplikację. Kluczowe strategie: subskrybuj wąski wycinek, dziel stan, memoizuj i trzymaj stan lokalnie. ## 1. Subskrybuj minimalny wycinek, którego potrzebujesz ```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); ``` Selektywne subskrypcje (selektory Zustand/Redux, atomy Jotai) to największa dźwignia — komponenty renderują się tylko gdy zmienia się ich konkretny wycinek, a nie przy każdej aktualizacji magazynu. ## 2. Podziel stan / kontekst aby ograniczyć zakres wpływu ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memoizuj komponenty i wartości ```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 ``` Memoizacja zapobiega renderowaniu dzieci gdy ich props (przez referencję) nie uległy zmianie — ale działa tylko jeśli również utrzymujesz props/callbacki referencyjna stabilnością (stąd `useCallback`/`useMemo`) i aktualizujesz stan **niezmiennie**. ## 4. Trzymaj stan tak lokalnie jak to możliwe ```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. Nie przechowuj pochodnych wartości; unikaj nowych referencji każde renderowanie ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Używaj memoizowanych selektorów dla danych pochodnych ```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 ``` ## Zmierz najpierw ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Dlaczego to ważne Nadmierne renderowania to wiodąca przyczyna leniwych aplikacji opartych na React/stanie i pochodzą z tego jak stan jest strukturyzowany i subskrybowany. Toolkit — wąskie selektywne subskrypcje, podzielone konteksty, memoizacja ze stabilnymi referencjami, niezmienne aktualizacje i lokalizacja stanu — bezpośrednio kontrolują zakres renderowania. Crucjalnie, powinieneś **zmierzyć** (Profiler) aby znaleźć rzeczywiste wąskie gardło zanim zaczniesz optymalizować, ponieważ nieostrożna memoizacja dodaje złożoność bez korzyści. Zrozumienie co wyzwala renderowania i jak je zawierać jest niezbędne dla wydajnych aplikacji na dużą skalę.