Context आपल्याला संपूर्ण subtree सह मूल्य शेअर करू देते प्रत्येक स्तरावर props पास न करता (prop drilling). आप एक context तयार करता, त्याच्या Provider मध्ये subtree लपविता, आणि कोणताही descendant useContext सह हे वाचते.
= ();
() {
(
);
}
() {
theme = ();
;
}
कमी-वारंवार, "जागतिक-सारखे" डेटा जो अनेक घटकांना आवश्यक आहे: theme, वर्तमान user, locale, feature flags.
जेव्हा Provider चा value बदलतो, प्रत्येक घटक जो context वापरतो तो पुन्हा render होतो — फक्त त्याचा भाग subscribe करण्याचा कोणताही मार्ग नाही. दोन व्यावहारिक परिणाम:
// ❌ 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}>
वारंवार बदलणार्या किंवा मोठ्या state साठी, context लहान तुकड्यांमध्ये विभागा, किंवा store (Zustand/Redux) वापरा जो selective subscriptions समर्थन करते. Context हे dependency-injection साधन आहे, संपूर्ण state manager नाही.