Context pozwala udostępnić wartość całemu poddrzewu bez przekazywania props na każdym poziomie (prop drilling). Tworzysz context, zawijasz poddrzewo w jego Provider, a każdy potomek odczytuje go za pomocą useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Nisko-częstotliwościowe, "globalne-ish" dane, których potrzebuje wiele komponentów: temat, bieżący użytkownik, locale, feature flags.
Gdy value Providera się zmienia, każdy komponent konsumujący context renderuje się ponownie — nie ma sposobu na subskrypcję tylko części z niego. Dwie praktyczne konsekwencje:
// ❌ 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}>
Dla często zmieniającego się lub dużego state podziel context na mniejsze części lub użyj store'a (Zustand/Redux) wspierającego selektywne subskrypcje. Context to narzędzie dependency-injection, nie pełny state manager.