Context vám umožňuje sdílet hodnotu s celým podstromem bez předávání props skrze každou úroveň (prop drilling). Vytvoříte context, zabalíte podstrom do jeho Provider a jakýkoli potomek jej čte pomocí useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Nízko-frekvenční, "globální-ish" data, která potřebují mnohé komponenty: theme, current user, locale, feature flags.
Když se změní value Provideru, každá komponenta, která context konzumuje, se znovu vykreslí — neexistuje způsob, jak se přihlásit pouze k jeho části. Dva praktické důsledky:
// ❌ 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}>
Pro často měnící se nebo velký state rozdělte context na menší kusy, nebo použijte store (Zustand/Redux), který podporuje selektivní odběry. Context je nástroj dependency-injection, nikoli úplný správce stavu.