React Context ਬਨਾਮ Zustand: ਕਿਸ ਨੂੰ ਕਦੋਂ ਵਰਤਣਾ ਹੈ
ਡਿਵੈਲਪਰ ਅਕਸਰ React state ਨਾਲ ਇੱਕ ਗਲਤੀ ਕਰਦੇ ਹਨ। ਉਹ Context ਦੀ ਗਲਤ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਅਤੇ ਫਿਰ ਪਰਫਾਰਮੈਂਸ (performance) ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਲਈ Context ਨੂੰ ਦੋਸ਼ੀ ਮੰਨਦੇ ਹਨ।
ਸਮੱਸਿਆ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਵੱਡਾ context object ਹੁੰਦੀ ਹੈ। ਜਦੋਂ ਉਸ object ਵਿੱਚ ਕੋਈ ਮੁੱਲ (value) ਬਦਲਦਾ ਹੈ, ਤਾਂ ਉਸ context ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲਾ ਹਰ component re-render ਹੁੰਦਾ ਹੈ। ਭਾਵੇਂ ਕਿਸੇ component ਨੂੰ ਸਿਰਫ਼ ਡੇਟਾ ਦਾ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਹਿੱਸਾ ਚਾਹੀਦਾ ਹੋਵੇ, ਫਿਰ ਵੀ ਇਹ object ਵਿੱਚ ਹੋਣ ਵਾਲੇ ਹਰ ਬਦਲਾਅ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦਾ ਹੈ।
ਜੇਕਰ ਤੁਹਾਡੇ notifications ਹਰ 30 ਸੈਕਿੰਡ ਵਿੱਚ ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ, ਤਾਂ ਤੁਹਾਡਾ Navbar re-render ਹੁੰਦਾ ਹੈ, ਭਾਵੇਂ Navbar ਨੂੰ ਸਿਰਫ਼ user name ਨਾਲ ਹੀ ਲੈਣਾ-ਦੇਣਾ ਹੋਵੇ। ਇਹ ਪਰਫਾਰਮੈਂਸ ਨੂੰ ਖਰਾਬ ਕਰ ਦਿੰਦਾ ਹੈ।
ਤੁਸੀਂ ਇਸ ਨੂੰ ਕਿਸੇ library ਤੋਂ ਬਿਨਾਂ ਠੀਕ ਕਰ ਸਕਦੇ ਹੋ। ਆਪਣੇ contexts ਨੂੰ ਇਸ ਆਧਾਰ 'ਤੇ ਵੰਡੋ ਕਿ ਉਹ ਕਿੰਨੀ ਵਾਰ ਬਦਲਦੇ ਹਨ।
ਇੱਕ ਵੱਡੇ context ਦੀ ਬਜਾਏ, ਕਈਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ: • user data ਲਈ UserContext • sidebar state ਲਈ UIContext • alerts ਲਈ NotificationContext
ਹੁਣ, ਤੁਹਾਡਾ Navbar ਸਿਰਫ਼ ਉਦੋਂ ਹੀ re-render ਹੋਵੇਗਾ ਜਦੋਂ user data ਬਦਲੇਗਾ। ਇਹ ਸਧਾਰਨ ਵੰਡ ਜ਼ਿਆਦਾਤਰ ਪਰਫਾਰਮੈਂਸ ਦੀਆਂ ਸ਼ਿਕਾਇਤਾਂ ਨੂੰ ਹੱਲ ਕਰ ਦਿੰਦੀ ਹੈ।
ਸਥਿਰ (stable) ਮੁੱਲਾਂ ਲਈ React Context ਦੀ ਵਰਤੋਂ ਕਰੋ: • Themes • Auth status • Language settings
Context Server Components ਦੇ ਨਾਲ ਵੀ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ। Zustand ਸਿਰਫ਼ client side 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ।
Zustand ਦੀ ਵਰਤੋਂ ਉਦੋਂ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ selective subscriptions ਦੀ ਲੋੜ ਹੋਵੇ। Zustand components ਨੂੰ state ਦੇ ਖਾਸ ਹਿੱਸਿਆਂ (slices) ਨੂੰ subscribe ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡੇ store ਦਾ ਇੱਕ ਹਿੱਸਾ ਬਦਲਦਾ ਹੈ, ਤਾਂ ਸਿਰਫ਼ ਉਹ components ਹੀ re-render ਹੁੰਦੇ ਹਨ ਜੋ ਉਸ ਖਾਸ ਹਿੱਸੇ ਨੂੰ ਦੇਖ ਰਹੇ ਹਨ।
ਨਵੇਂ state ਲਈ ਇਸ ਤਰਕ (logic) ਦੀ ਪਾਲਣਾ ਕਰੋ:
React Context ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੇਕਰ: • ਡੇਟਾ ਸਥਿਰ ਹੈ (theme, auth, locale)। • ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ SSR ਜਾਂ Server Components ਦੇ ਨਾਲ ਕੰਮ ਕਰਵਾਉਣ ਦੀ ਲੋੜ ਹੈ। • ਤੁਸੀਂ contexts ਨੂੰ ਵੰਡ ਕੇ prop drilling ਨੂੰ ਰੋਕਣਾ ਚਾਹੁੰਦੇ ਹੋ।
Zustand ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੇਕਰ: • ਡੇਟਾ ਅਕਸਰ ਬਦਲਦਾ ਹੈ। • Components ਨੂੰ state ਦੇ ਖਾਸ ਹਿੱਸਿਆਂ (slices) 'ਤੇ ਨਜ਼ਰ ਰੱਖਣ ਦੀ ਲੋੜ ਹੈ। • ਤੁਹਾਡਾ logic ਗੁੰਝਲਦਾਰ ਹੈ।
ਰੁਕੋ। API ਡੇਟਾ ਲਈ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਦੀ ਵੀ ਵਰਤੋਂ ਨਾ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਸਰਵਰ ਤੋਂ ਡੇਟਾ fetch ਕਰ ਰਹੇ ਹੋ, ਤਾਂ TanStack Query ਦੀ ਵਰਤੋਂ ਕਰੋ। Context ਅਤੇ Zustand caching ਜਾਂ background refetching ਨੂੰ ਸੰਭਾਲਦੇ ਨਹੀਂ ਹਨ।
Summary: • ਇੱਕ ਵੱਡਾ context object re-renders ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ। ਇਸ ਨੂੰ ਵੰਡ ਦਿਓ। • ਸਥਿਰ ਮੁੱਲਾਂ ਲਈ Zustand ਦੀ ਵਰਤੋਂ ਕਰਨਾ overkill ਹੈ। • ਵਾਰ-ਵਾਰ ਹੋਣ ਵਾਲੇ ਬਦਲਾਅ ਲਈ Context ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ lag ਆਉਂਦਾ ਹੈ। • Server state ਲਈ Zustand ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਗਲਤ ਸਾਧਨ ਹੈ।