useContext ਅਤੇ Context API ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

Context ਤੁਹਾਨੂੰ ਇੱਕ ਪੂਰੀ ਸਬਟ੍ਰੀ ਦੇ ਨਾਲ ਇੱਕ ਮੂਲ ਸਾਂਝਾ ਕਰਨ ਦਿੰਦਾ ਹੈ **ਹਰ ਪੱਧਰ ਤੋਂ props ਦੁਆਰਾ ਲੰਘਾਏ ਬਿਨਾ** (prop drilling)। ਤੁਸੀਂ ਇੱਕ context ਬਣਾਉਂਦੇ ਹੋ, ਇੱਕ ਸਬਟ੍ਰੀ ਨੂੰ ਇਸ ਦੇ `Provider` ਵਿੱਚ ਲਪੇਟਦੇ ਹੋ, ਅਤੇ ਕੋਈ ਵੀ ਵੰਸ਼ਜ `useContext` ਦੇ ਨਾਲ ਇਸ ਨੂੰ ਪੜ੍ਹਦੇ ਹਨ। ```jsx const ThemeContext = createContext("light"); // default value function App() { return ( {/* provides to everything below */} ); } function Toolbar() { // reads the nearest provider's value — no props needed in between const theme = useContext(ThemeContext); // "dark" return

...

; } ``` ## ਇਹ ਕਿਸ ਲਈ ਚੰਗਾ ਹੈ ਘੱਟ-ਬਾਰੰਬਾਰਤਾ, "ਗਲੋਬਲ-ਆਈਸ਼" ਡੇਟਾ ਜਿਸਦੀ ਬਹੁਤ ਸਾਰੇ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਲੋੜ ਹੁੰਦੀ ਹੈ: **theme, ਮੌਜੂਦਾ ਯੂਜ਼ਰ, locale, feature flags**। ## ਵੱਡਾ ਸਵਾਲ: re-renders ਜਦੋਂ Provider ਦਾ `value` ਬਦਲਦਾ ਹੈ, **ਹਰ** ਕੰਪੋਨੈਂਟ ਜੋ context ਨੂੰ ਖਪਤ ਕਰਦਾ ਹੈ ਮੁੜ-ਰੇਂਡਰ ਕਰਦਾ ਹੈ — ਇਸ ਦੇ ਸਿਰਫ ਇੱਕ ਹਿੱਸੇ ਦੀ ਸਦਸਿਤਾ ਲੈਣ ਦਾ ਕੋਈ ਤਰੀਕਾ ਨਹੀਂ ਹੈ। ਦੋ ਵਿਹਾਰਕ ਨਤੀਜੇ: ```jsx // ❌ a NEW object every render → all consumers re-render every time // ✅ memoize the value so it only changes when it really changes const value = useMemo(() => ({ user, setUser }), [user]); ``` **ਵਾਰ-ਵਾਰ ਬਦਲਣ ਵਾਲੇ** ਜਾਂ ਵਿਸ਼ਾਲ state ਲਈ, context ਨੂੰ ਛੋਟੇ ਟੁਕੜਿਆਂ ਵਿੱਚ ਵੰਡੋ, ਜਾਂ ਇੱਕ store (Zustand/Redux) ਵਰਤੋ ਜੋ ਚੋਣਾਤਮਕ subscriptions ਨੂੰ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। Context ਇੱਕ dependency-injection ਟੂਲ ਹੈ, **ਪੂਰਨ** state manager ਨਹੀਂ।