Zustand ਅਤੇ Jotai ਵਰਗੀਆਂ ਹਲਕੀਆਂ ਸਟੋਰਾਂ Redux ਤੋਂ ਕਿਵੇਂ ਵੱਖਰੀਆਂ ਹਨ?

Question

Accepted Answer

**Zustand** ਅਤੇ **Jotai** ਘੱਟੋ-ਘੱਟ ਸਟੇਟ ਲਾਇਬ੍ਰੇਰੀਆਂ ਹਨ ਜੋ Redux ਦੀ ਬਜਾਏ ਬਹੁਤ ਘੱਟ boilerplate ਦੇ ਨਾਲ ਗਲੋਬਲ ਸਟੇਟ ਪ੍ਰਾਪਤ ਕਰਦੀਆਂ ਹਨ, ਅਤੇ ਬਿਨਾਂ ਜ਼ਰੂਰੀ re-renders ਤੋਂ ਬਚਣ ਲਈ ਬਿਲਟ-ਇਨ **selective subscriptions** ਦੇ ਨਾਲ। ਉਹ ਵੱਖ-ਵੱਖ ਮਾਨਸਿਕ ਮਾਡਲ ਲਿੰਦੀਆਂ ਹਨ: Zustand ਇੱਕ ਸਿੰਗਲ ਸਟੋਰ ਹੈ; Jotai ਐਟੌਮਿਕ ਹੈ। ## Zustand — ਇੱਕ ਸਧਾਰਨ, hook-ਆਧਾਰਿਤ ਸਟੋਰ ```jsx import { create } from "zustand"; // define a store: state + the actions that update it, all in one place const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })), // no actions/reducers/dispatch reset: () => set({ count: 0 }), })); function Counter() { const count = useStore((s) => s.count); // SELECT — re-renders only when count changes const increment = useStore((s) => s.increment); return ; } ``` ਕੋਈ provider ਨਹੀਂ, ਕੋਈ actions ਨਹੀਂ, ਕੋਈ reducers ਨਹੀਂ, ਕੋਈ dispatch ਨਹੀਂ — ਤੁਸੀਂ setter ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਸਿੱਧਾ ਕਾਲ ਕਰਦੇ ਹੋ। selector (`s => s.count`) ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕੰਪੋਨੈਂਟ *ਸਿਰਫ਼* ਤਦ re-render ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਉਹ ਸਲਾਈਸ ਬਦਲਦੀ ਹੈ। ## Jotai — ਐਟੌਮਿਕ ਸਟੇਟ ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a tiny piece of state const doubleAtom = atom((get) => get(countAtom) * 2); // derived atom function Counter() { const [count, setCount] = useAtom(countAtom); // works like useState, but GLOBAL return ; } ``` Jotai ਸਾਨੂੰ ਛੋਟੀਆਂ **atoms** ਤੋਂ ਸਟੇਟ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਰਚਨਾ ਕਰਦੇ ਹੋ; ਕੰਪੋਨੈਂਟ ਅਲੱਗ-ਅਲੱਗ ਐਟਮਜ਼ ਨੂੰ subscribe ਕਰਦੇ ਹਨ ਅਤੇ ਸਿਰਫ਼ ਜਦੋਂ ਉਹ ਖਾਸ ਐਟਮ ਬਦਲਦੇ ਹਨ ਤਦ re-render ਹੁੰਦੇ ਹਨ। ## Redux ਨਾਲ ਤੁਲਨਾ ```text Redux (classic) Zustand Jotai Boilerplate high (actions/reducers) very low very low Provider required none minimal Mental model single store + dispatch single store, hooks atomic (useState-like) Re-renders needs selectors selector built-in per-atom (granular) Devtools excellent good good Bundle size larger tiny (~1KB) tiny ``` ## ਕੀ ਚੁਣਨਾ ਹੈ ```text Zustand → simple global state, minimal ceremony (most apps' global needs) Jotai → bottom-up/granular state, lots of independent pieces, derived values Redux(RTK) → very large apps, strict structure, rich devtools/middleware ecosystem ``` ## ਇਹ ਮਾਇਨੇ ਰਖਦਾ ਹੈ Zustand ਅਤੇ Jotai Redux ਦੀ boilerplate ਤੋਂ ਦੂਰ **ਘੱਟ, ergonomic** ਗਲੋਬਲ ਸਟੇਟ ਵੱਲ ਆਧੁਨਿਕ ਰੁਝਾਨ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ ਜਿਸ ਵਿੱਚ ਬਿਲਟ-ਇਨ selective subscriptions ਹਨ (Context ਦੀ re-render ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹੋਏ)। "ਜਾਣ ਪਾਉਣਾ ਕਿ ਉਹ ਮੌਜੂਦ ਹਨ — ਅਤੇ ਕਿ Zustand ਇੱਕ ਛੋਟਾ single-store ਮਾਡਲ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਜਦਕਿ Jotai ਰਚਨਾਯੋਗ atoms ਪੇਸ਼ ਕਰਦਾ ਹੈ — ਤੁਹਾਨੂੰ ਇੱਕ ਹਲਕਾ ਟੂਲ ਚੁਣਨ ਦਿੰਦਾ ਹੈ ਜੋ ਬਹੁਤੇ ਐਪਸ ਦੀਆਂ ਗਲੋਬਲ-ਸਟੇਟ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ, ਸੱਚਮੁੱਚ ਵੱਡੀਆਂ, ਜਟਿਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਭਾਰੀ Redux Toolkit ਨੂੰ ਰਖਦੇ ਹੋਏ। Context ਤੋਂ ਵੱਡਾ ਸਾਂਝਾ ਫਾਇਦਾ ਸਤ੍ਹ ਤਾਲਮੇਲ subscriptions ਹਨ ਜੋ ਓਵਰ-ਰੈਂਡਰਿੰਗ ਨੂੰ ਰੋਕਦੇ ਹਨ।