Context te permite să partajezi o valoare cu un subarbore întreg fără a trece props prin fiecare nivel (prop drilling). Creezi un context, înfășori un subarbore în Provider-ul acestuia, și orice descendent îl citește cu useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Date de joasă frecvență, "global-ish" de care au nevoie multe componente: tema, utilizatorul curent, locale, feature flags.
Când value Provider-ului se modifică, fiecare componentă care consumă contextul se redă — nu existe nici o modalitate de a te abona doar la o parte din acesta. Două consecințe practice:
// ❌ 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}>
Pentru state care se schimbă frecvent sau pentru state mare, împarte contextul în bucăți mai mici, sau folosește un store (Zustand/Redux) care suportă abonări selective. Context este un instrument de dependency-injection, nu un gestionar de state complet.