A Context lehetővé teszi egy érték megosztását egy teljes subtree-vel anélkül, hogy props-okat adnánk át az egyes szinteken (prop drilling). Létrehozol egy context-et, belecsavarsz egy subtree-t annak Provider-jébe, és bármelyik descendant beolvassa azt a useContext-szel.
= ();
() {
(
);
}
() {
theme = ();
;
}
Alacsony gyakorisággal változó, "globális-szerű" adatok, amelyekre sok komponensnek szüksége van: téma, jelenlegi felhasználó, lokalitás, funkciók jelzői.
Mikor a Provider value megváltozik, minden komponens, amely a context-et fogyasztja, újrarenderelődik — nincs mód csak egy részére feliratkozni. Két gyakorlati következmény:
// ❌ 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}>
A gyakran változó vagy nagyobb state esetén osszuk fel a context-et kisebb darabokra, vagy használjunk egy tárolót (Zustand/Redux), amely támogatja a szelektív feliratkozást. A Context egy dependency-injection eszköz, nem egy teljes állapotkezelő.