Context vam omogućava dijeljenje vrijednosti s cijelim subtree-om bez prosleđivanja props kroz svaku razinu (prop drilling). Kreirate context, umotate subtree u njegov Provider, i bilo koji descendant ga čita s useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Niskovolumetni, "globalno-slični" podaci koje trebaju brojenoj komponente: theme, trenutni korisnik, locale, feature flags.
Kada se value Provider-a promijeni, svaka komponenta koja konzumira context se ponovno iscrta — nema načina da se pretplatite samo na dio. Dvije praktične posljedice:
// ❌ 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}>
Za često mijenjajuće ili veće stanje, podijelite context na manje dijelove, ili koristite spremnik (Zustand/Redux) koji podržava selektivne pretplate. Context je alat za ubacivanje ovisnosti, nije potpuni upravljač stanjem.