Context कहिले राम्रो state समाधान हो र कहिले होइन?

Question

Accepted Answer

React को **Context API** ले तपाईंलाई prop drilling बिना एक पूरो component subtree सँग मान साझा गर्न दिन्छ। यो **कम-आवृत्ति, व्यापक रूपमा साझा** डेटाको लागि उत्तम छ — तर यो पूर्ण 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 कुनै पनि परिवर्तनमा re-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 मान परिवर्तन हुन्छ, **सबै** components जो त्यो context खपत गर्छन् re-render हुन्छन् — तिनीहरू परिवर्तन भएको भाग प्रयोग गर्छन् वा छैनन् भन्ने कुरा सम्बन्ध नराखेर। बारम्बार-अद्यावधिक state को लागि, यो प्रदर्शन समस्या पैदा गर्छ। Context को कोई built-in selective subscription छैन।n ## समाधान र विकल्प ```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 गर्छन् र केवल जब ती परिवर्तन हुन्छन् तब re-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 को sweet spot — र यसको सीमा — जान्नुले दुई सामान्य गल्तीहरू रोक्छ: Context मा हुनु चाहिने कुराहरूमा prop-drilling गर्ने र Context मा उच्च-आवृत्ति state राख्ने (app-wide re-renders पैदा गर्ने)। नियम: **कम-परिवर्तन हुने, व्यापक रूपमा साझा** मान (theme, user, locale) को लागि Context; **बारम्बार-परिवर्तन हुने वा ठूलो** साझा state को लागि selective subscriptions सँग dedicated store। यो बुझ्नु कि Context ले state वितरण गर्छ तर यसलाई व्यवस्थापन गर्दैन यो स्पष्ट गर्छ कि यो कहिले पर्याप्त छ र कहिले तपाईंलाई अधिक चाहिन्छ।