useContext für globalen State
Erstellen Sie einen Context, umschließen Sie einen Teilbaum mit dessen Provider und verwenden Sie den Wert mit useContext, um Theme- oder Auth-State ohne Prop Drilling zu teilen.
useContext für globalen State ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Problem des Prop-Drilling
Prop-Drilling bedeutet, Daten durch viele zwischengeschaltete Komponenten weiterzugeben, die diese Daten nicht verwenden, nur um eine tief verschachtelte untergeordnete Komponente zu erreichen. Context löst dieses Problem, indem ein Wert für jede Komponente im Baum verfügbar wird, ohne ihn ausdrücklich weiterzugeben.
Einen Context erstellen
createContext(defaultValue) erstellt ein Context-Objekt. Der Standardwert wird verwendet, wenn eine Komponente den Context liest, ohne dass sich darüber ein passender Provider befindet.
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});Den Context bereitstellen
Umschließen Sie den Teil des Baums, der den Context benötigt, mit dem Provider. Alle darin enthaltenen Komponenten können den Context-Wert lesen.
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>Mit useContext auslesen
Jede Komponente innerhalb des Providers kann mit useContext(ThemeContext) auf den Context-Wert zugreifen. Sie müssen nichts als Prop übergeben.
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}Eigener Hook als Wrapper für useContext
Exportieren Sie einen eigenen Hook, der intern useContext aufruft. Das ist sauberer, als den Context direkt bereitzustellen, und ermöglicht zusätzliche Validierung.
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();Erneutes Rendern bei Context-Änderungen
Wenn sich der Wert des Providers ändert, werden alle Consumer erneut gerendert. Ist der Wert ein Objekt, führt eine neue Objektreferenz bei jedem Rendern dazu, dass alle Consumer erneut gerendert werden. Memoisieren Sie den Wert mit useMemo, um dies zu verhindern.
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>Wann Sie Context verwenden sollten
Geeignet für: Theme, Locale, authentifizierten Benutzer, Feature-Flags und ein Benachrichtigungssystem. Weniger geeignet für: häufige Aktualisierungen (bei jedem Tastendruck) und große, komplexe Zustände (verwenden Sie stattdessen einen Store).
Mehrere Contexts
Sie können mehrere unabhängige Contexts verwenden. Halten Sie sie klar abgegrenzt — einen AuthContext für die Authentifizierung und einen ThemeContext für das Theme. Vermeiden Sie einen einzigen allumfassenden Context, der alles enthält.
Context oder Redux
Context ist integriert und reicht für globale Daten aus, die sich nur selten ändern. Redux/Zustand/Pinia eignen sich besser für komplexe Zustände mit vielen Aktualisierungen, Time-Travel-Debugging oder Anforderungen an Middleware.
Auth-Context-Muster
Ein gängiges Muster ist ein AuthContext, der den aktuellen Benutzer und Authentifizierungsmethoden enthält. Komponenten, die ihn verwenden, erhalten den Benutzer, ohne Props über mehrere Ebenen weiterreichen zu müssen.
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};Context und TypeScript
Typisieren Sie den Context mit einem Interface. Verwenden Sie null als Anfangswert und lösen Sie im eigenen Hook einen Fehler aus, wenn der Wert null ist. Dadurch bleibt der unmögliche Zustand „außerhalb eines Providers verwendet“ nicht unbemerkt.
Performance: memo + Context
Mit React.memo umschlossene Komponenten werden nicht erneut gerendert, solange sich ihre Props nicht ändern. Wenn die Ausgabe eines Context-Consumers nur von einem Teil des Contexts abhängt, teilen Sie den Context auf oder verwenden Sie Selector-Muster, um unnötiges erneutes Rendern zu vermeiden.
Kurze Prüfung
Was gibt useContext(MyContext) zurück, wenn der Aufruf innerhalb einer Komponente erfolgt, über der sich kein Provider befindet?
Zusammenfassung: useContext
createContext erstellt einen Context mit einem Standardwert. Umschließen Sie den Komponentenbaum mit einem Provider, um einen Wert bereitzustellen. useContext liest den Wert überall innerhalb dieses Baums aus. Eigene Hooks kapseln useContext zur Validierung. Memoisieren Sie den Provider-Wert, um unnötiges erneutes Rendern zu verhindern. Verwenden Sie Context für globale Daten, die sich nur selten ändern, etwa Theme und Authentifizierung.
Häufig gestellte Fragen
Ist die Lektion „useContext für globalen State“ kostenlos?
Ja — der vollständige Text von „useContext für globalen State“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „useContext für globalen State“?
Erstellen Sie einen Context, umschließen Sie einen Teilbaum mit dessen Provider und verwenden Sie den Wert mit useContext, um Theme- oder Auth-State ohne Prop Drilling zu teilen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „useContext für globalen State“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- useContext für globalen State
- useReducer für komplexen State
- useMemo und useCallback für Performance
- Custom Hooks: wiederverwendbare Logik extrahieren