Wann ist Context eine gute State-Lösung und wann nicht?

Question

Accepted Answer

Reacts **Context API** ermöglicht es dir, einen Wert mit einem ganzen Component-Unterbaum zu teilen, ohne prop drilling. Es ist großartig für **niedrigfrequente, weitverbreitete** Daten — aber es ist *keine* vollständige State-Management-Lösung und hat ein Re-Rendering-Problem für häufig wechselnde State. ## Warum es wichtig ist ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## Das Problem: Jeder Consumer re-rendert bei JEDER Änderung ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` Wenn sich der Wert des Kontexts ändert, werden **alle** Komponenten, die diesen Kontext verwenden, neu gerendert — unabhängig davon, ob sie den Teil verwenden, der sich geändert hat. Bei häufig aktualisiertem State führt dies zu Performance-Problemen. Context hat kein eingebautes selektives Abo. ## Lösungen und die Alternative ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` State-Bibliotheken (Zustand, Redux, Jotai) lösen das Re-Rendering-Problem mit **selektiven Abos** — Komponenten abonnieren nur die Slices, die sie verwenden, und werden nur neu gerendert, wenn sich diese ändern: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context ist kein State Manager ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` Wissend, dass Context ein State verteilt, aber nicht verwaltet, wird klar, wann es ausreicht und wann du mehr brauchst.