Context आपको एक संपूर्ण subtree के साथ मान साझा करने देता है हर स्तर के माध्यम से props पास किए बिना (prop drilling)। आप एक context बनाते हैं, अपने Provider में subtree को लपेटते हैं, और कोई भी descendant इसे useContext के साथ पढ़ता है।
= ();
() {
(
);
}
() {
theme = ();
;
}
कम-आवृत्ति, "वैश्विक-जैसा" डेटा जो कई घटकों को चाहिए: theme, वर्तमान user, locale, feature flags।
जब Provider का value बदलता है, हर वह घटक जो context का उपभोग करता है re-render होता है — इसके केवल एक हिस्से की सदस्यता लेने का कोई तरीका नहीं है। दो व्यावहारिक परिणाम:
// ❌ 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) का उपयोग करें जो चयनात्मक सदस्यता का समर्थन करता है। Context एक dependency-injection tool है, पूर्ण state manager नहीं।