Context कब एक अच्छा state समाधान है और कब नहीं?

Question

Accepted Answer

React का **Context API** आपको prop drilling के बिना पूरे component subtree के साथ एक value साझा करने देता है। यह **कम-frequency वाले, व्यापक रूप से साझा** डेटा के लिए बढ़िया है — लेकिन यह *पूर्ण* state-management समाधान *नहीं* है और अक्सर बदलने वाले state के लिए इसमें एक re-render की समस्या है। ## Context कब चमकता है ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## समस्या: किसी भी बदलाव पर हर consumer फिर से render होता है ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` जब context value बदलती है, तो उस context का उपभोग करने वाले **सभी** components फिर से render होते हैं — चाहे वे बदले हुए हिस्से का उपयोग करते हों या नहीं। अक्सर बदलने वाले state के लिए, इससे performance समस्याएँ होती हैं। Context में कोई built-in selective subscription नहीं है। ## उपाय और विकल्प ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` State libraries (Zustand, Redux, Jotai) **selective subscriptions** के साथ re-render की समस्या हल करती हैं — components केवल उन slices को subscribe करते हैं जिनका वे उपयोग करते हैं और केवल तभी फिर से render होते हैं जब वे बदलते हैं: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context एक state manager नहीं है ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` ## यह क्यों महत्वपूर्ण है Context की उपयुक्त जगह — और इसकी सीमाएँ — जानना दो आम गलतियों से बचाता है: ऐसी चीज़ों की prop-drilling जो Context में होनी चाहिए, और high-frequency state को Context में रखना (जिससे app-व्यापी re-renders होते हैं)। नियम: **कम बदलने वाली, व्यापक रूप से साझा** values (theme, user, locale) के लिए Context; और **अक्सर बदलने वाले या बड़े** साझा state के लिए selective subscriptions वाला एक dedicated store। यह समझना कि Context state वितरित करता है लेकिन उसे प्रबंधित नहीं करता, स्पष्ट करता है कि यह कब पर्याप्त है और कब आपको अधिक की ज़रूरत है।