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 ਨਹੀਂ ਹੈ। ## ਘੱਟੋ-ਘੱਟ ਕਰਨ ਅਤੇ ਵਿਕਲਪ ```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) re-render ਦੀ ਸਮੱਸਿਆ ਨੂੰ **selective subscriptions** ਨਾਲ ਹੱਲ ਕਰਦੇ ਹਨ — 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 — ਅਤੇ ਇਸ ਦੀਆਂ ਸੀਮਾਵਾਂ — ਜਾਣਨਾ ਦੋ ਆਮ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ: ਉਨ੍ਹਾਂ ਚੀਜ਼ਾਂ ਨੂੰ prop-drilling ਕਰਨਾ ਜੋ Context ਵਿੱਚ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ, ਅਤੇ high-frequency state ਨੂੰ Context ਵਿੱਚ ਪਾਉਣਾ (app-wide re-renders ਦਾ ਕਾਰਨ ਬਣਨਾ)। ਨਿਯਮ: **ਘੱਟ-ਬਦਲਣ ਵਾਲੇ, ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਸਾਂਝਾ** ਮੁੱਲ (theme, user, locale) ਲਈ Context; **ਆਮ ਤੌਰ 'ਤੇ ਬਦਲਣ ਵਾਲੇ ਜਾਂ ਵੱਡੇ** ਸਾਂਝੇ state ਲਈ selective subscriptions ਨਾਲ dedicated store। ਇਹ ਸਮਝਣਾ ਕਿ Context state ਨੂੰ ਵੰਡਦਾ ਹੈ ਪਰ ਇਸਦਾ ਪ੍ਰਬੰਧਨ ਨਹੀਂ ਕਰਦਾ ਸਪੱਸ਼ਟ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਕਦੋਂ ਕਾਫੀ ਹੈ ਅਤੇ ਕਦੋਂ ਤੁਹਾਨੂੰ ਹੋਰ ਚਾਹੀਦਾ ਹੈ।