Context کب ایک اچھا state حل ہے اور کب نہیں؟

Question

Accepted Answer

React کا **Context API** آپ کو پورے component subtree کے ساتھ ایک value share کرنے دیتا ہے بغیر prop drilling کے۔ یہ **کم تعداد میں، وسیع پیمانے پر shared** ڈیٹا کے لیے بہترین ہے — لیکن یہ مکمل state-management حل نہیں ہے اور frequently-changing 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 ANY تبدیلی پر 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 کو استعمال کرتے ہیں re-render ہوتے ہیں — چاہے وہ اس حصے کو استعمال کریں جو تبدیل ہوا ہے یا نہیں۔ frequently-updating state کے لیے، یہ کارکردگی کے مسائل کا سبب بنتا ہے۔ 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 کرتے ہیں جو وہ استعمال کرتے ہیں اور صرف تب 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 کو سمجھنا — اور اس کی حدود — دو عام غلطیوں سے بچاتا ہے: ایسی چیزوں کو prop-drill کرنا جو Context میں ہونی چاہیں، اور Context میں high-frequency state ڈالنا (جو app-wide re-renders کا سبب بنتا ہے)۔ قانون: Context **rarely-changing، widely-shared** values کے لیے (theme، user، locale)؛ **frequently-changing یا بڑے** shared state کے لیے selective subscriptions کے ساتھ ایک devoted store۔ یہ سمجھنا کہ Context state کو distribute کرتا ہے لیکن اسے manage نہیں کرتا، یہ واضح کرتا ہے کہ کب یہ کافی ہے اور کب آپ کو مزید کی ضرورت ہے۔