Context ક્યારે સારું state સોલ્યુશન છે અને ક્યારે નથી?

Question

Accepted Answer

React's **Context API** તમને prop drilling કર્યા વિના આખા component subtree સાથે value શેર કરવા દે છે. તે **low-frequency, widely-shared** ડેટા માટે શાનદાર છે — પરંતુ તે *સંપૂર્ણ* state-management સોલ્યુશન નથી અને frequently-changing state માટે re-render pitfall છે. ## 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 ``` ## The pitfall: હર consumer ANY change પર 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 value બદલાય છે, **બધા** components જે તે context consume કરે છે તે re-render થાય છે — ભલે તેઓ બદલાયેલ ભાગ વાપરતા હોય કે નહીં. Frequently-updating state માટે, આ performance સમસ્યાઓ પેદા કરે છે. Context ને built-in selective subscription નથી. ## Mitigations અને વિકલ્પ ```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 સબ્સ્ક્રાઇબ કરે છે જેનો તેઓ વાપર કરે છે અને માત્ર જ્યારે તે બદલાય તો 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-drill કરવી, અને high-frequency state Context માં મૂકવી (app-wide re-renders ને કારણે). નિયમ: Context **rarely-changing, widely-shared** values (theme, user, locale) માટે; **frequently-changing અથવા large** shared state માટે selective subscriptions સાથેનું dedicated store. જે Context state વિતરિત કરે છે પણ તેને manage નથી કરે તે સમજવાથી તે સ્પષ્ટ થાય છે કે તે ક્યારે પર્યાપ્ત છે અને ક્યારે તમને વધુ જરૂર છે.