Context ermöglicht es Ihnen, einen Wert mit einem ganzen Unterbaum zu teilen, ohne props durch jede Ebene zu leiten (prop drilling). Sie erstellen einen context, wickeln einen Unterbaum in seinen Provider ein, und jeder Nachkomme liest ihn mit useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Niedrigfrequente, "globale" Daten, die viele Komponenten benötigen: theme, current user, locale, feature flags.
Wenn sich der value des Providers ändert, wird jede Komponente, die den context verbraucht, neu gerendert – es gibt keine Möglichkeit, sich nur für einen Teil davon zu abonnieren. Zwei praktische Konsequenzen:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
Für häufig ändernden oder großen State teilen Sie den context in kleinere Teile auf, oder verwenden Sie einen Store (Zustand/Redux), der selektive Abos unterstützt. Context ist ein Dependency-Injection-Tool, kein vollständiger State Manager.