Wie verhinderst du, dass State-Updates zu exzessivem Neurendern führen?

Question

Accepted Answer

State-Änderungen lösen Neurendern aus, und schlecht strukturierter State kann **deutlich mehr Neurendern als nötig** verursachen — und die App verlangsamen. Schlüsselstrategien: engmaschiges Abonnieren, State aufteilen, Memoization und State lokal halten. ## 1. Abonniere das Minimum, das du brauchst ```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); ``` Selektive Abos (Zustand/Redux selectors, Jotai atoms) sind der wichtigste einzelne Hebel — Komponenten rendern neu, nur wenn sich ihr spezifischer Slice ändert, nicht bei jedem Store-Update. ## 2. State / Context aufteilen, um Auswirkungen zu begrenzen ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Komponenten und Werte memoizieren ```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 ``` Memoization verhindert, dass untergeordnete Komponenten neu rendern, wenn sich ihre Props (per Referenz) nicht geändert haben — aber es funktioniert nur, wenn du auch Props/Callbacks referenziell stabil hältst (`useCallback`/`useMemo`) und State **immutable** aktualisierst. ## 4. Halte State so lokal wie möglich ```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. Speichere keine abgeleiteten Werte; meide neue Referenzen bei jedem Render ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Nutze memoized Selectors für abgeleitete Daten ```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 ``` ## Miss zuerst ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Warum es wichtig ist Exzessives Neurendern ist ein Hauptgrund für langsame React/State-getriebene Apps und entsteht aus der Struktur des State und wie man sich darauf abonniert. Das Toolkit — engmaschige selektive Abos, aufgeteilte Contexts, Memoization mit stabilen Referenzen, unveränderliche Updates und lokalisierter State — kontrolliert direkt den Umfang der Neurender. Entscheidend ist, dass du **messen** solltest (Profiler), um den echten Bottleneck vor der Optimierung zu finden, da unbedachte Memoization Komplexität ohne Nutzen hinzufügt. Das Verständnis, was Neurendern auslöst und wie man es eindämmt, ist für performante großflächige Apps unerlässlich.