Context ले तपाईंलाई सम्पूर्ण subtree सँग मान साझेदारी गर्न अनुमति दिन्छ प्रत्येक स्तरमार्फत props पास नगरी (prop drilling)। तपाईंले context सिर्जना गर्नुहुन्छ, subtree लाई यसको Provider मा बेर्न सक्नुहुन्छ, र कुनै पनि descendant useContext सँग यो पढ्छ।
= ();
() {
(
);
}
() {
theme = ();
;
}
कम-फ्रिक्वेन्सी, "ग्लोबल-जस्तो" डेटा जो धेरै कम्पोनेन्टलाई चाहिन्छ: theme, वर्तमान user, locale, feature flags।
जब Provider को value परिवर्तन हुन्छ, हरेक कम्पोनेन्ट जसले context प्रयोग गर्छ तुरुन्तै re-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 होइन।