Context inakuruhusu kushiriki thamani na msomeko mzima bila kupepesha props kupitia kila kiwango (prop drilling). Unasanya context, kuzunguka msomeko katika Provider yake, na kila kizazi kinakisoma kwa useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Data ya chini-frequency, "global-ish" ambayo sehemu nyingi zinahitaji: theme, current user, locale, feature flags.
Nakati Provider's value inabadilika, kila sehemu inayokula context hupangwa tena — hakuna njia ya kusubscribe kwa sehemu moja tu. Matokeo mawili ya vitendo:
// ❌ 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}>
Kwa state inayobadilika mara kwa mara au kubwa, gawanya context katika vipande vidogo, au tumia hifadhi (Zustand/Redux) inayoungana na subscriptions za kuteua. Context ni chombo cha dependency-injection, si manager kamili wa state.