Context कधी राज्य समाधान असा चांगला आहे आणि कधी नाही?

Question

Accepted Answer

React चा **Context API** तुम्हाला प्रॉप ड्रिलिंग न करता संपूर्ण कंपोनेंट सबट्रीसह मूल्य शेअर करू देतो. हे **कमी वारंवारता, व्यापकपणे शेअर केलेल्या** डेटासाठी उत्तम आहे — परंतु हे संपूर्ण राज्य-व्यवस्थापन समाधान नाही आणि वारंवार बदलणारे राज्यासाठी पुन्हा-रेंडर करण्याचा त्रास आहे. ## 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 ``` ## त्रास: प्रत्येक उपभोक्ता कोणत्याही बदलावर पुन्हा-रेंडर करतो ```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 मध्ये अंतर्निर्मित निवडक सदस्यता नाही. ## परिहार आणि पर्याय ```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 ``` राज्य लायब्ररीज (Zustand, Redux, Jotai) **निवडक सदस्यता** सह पुन्हा-रेंडर समस्येचे निराकरण करतात — घटक केवळ त्यांच्या वापरणार्‍या स्लाइसला सदस्यस्क्रीय करतात आणि केवळ ते बदलते तेव्हा पुन्हा-रेंडर करतात: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context राज्य व्यवस्थापक नाही ```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 चा मिठा स्पॉट जाणून — आणि त्याच्या मर्यादा — दोन सामान्य चुका रोखते: Context मध्ये असणे आवश्यक असलेल्या गोष्टीचे प्रॉप ड्रिलिंग, आणि उच्च-वारंवारता राज्य Context मध्ये ठेवणे (अ‍ॅप-व्यापी पुन्हा-रेंडरिंग कारण होते). नियम: Context साठी **क्वचित-बदलणारे, व्यापकपणे शेअर केलेल्या** मूल्ये (थीम, वापरकर्ता, स्थान); **वारंवार-बदलणारे किंवा मोठे** सामायिक राज्यसाठी निवडक सदस्यताचा समर्थन करणारी समर्पित स्टोर. हे समजून घेणे की Context राज्य वितरीत करते परंतु त्याचे व्यवस्थापन करत नाही हे स्पष्ट करते की ते कधी पुरेसे आहे आणि कधी अधिकची आवश्यकता आहे.