Context të lejon të ndash një vlerë me një nënpemë të tërë pa kaluar props përmes çdo niveli (prop drilling). Krijon një context, përfundon një nënpemë në Provider-in e tij, dhe çdo pasardhës e lexon atë me useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Të dhëna me frekuencë të ulët, "globale-ish" që kanë nevojë shumë komponentë: tema, përdoruesi aktual, locale, feature flags.
Kur value e Provider ndryshon, çdo komponent që konsumon contextin riaftësohet — nuk ka asnjë mënyrë për të u pajtuar vetëm me një pjesë të tij. Dy pasoja praktike:
// ❌ 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}>
Për state që ndryshon shpesh ose të madh, ndaj contextin në pjesë më të vogla, ose përdor një store (Zustand/Redux) që mbështet pajtim selektiv. Context është një mjet dependency-injection, jo një menaxher i plotë i shtetit.