Zustand اور Jotai جیسے lightweight stores Redux سے کیسے مختلف ہیں؟

Question

Accepted Answer

**Zustand** اور **Jotai** minimal state libraries ہیں جو Redux سے کہیں کم boilerplate کے ساتھ global state کو حاصل کرتی ہیں، اور ان میں unnecessary re-renders سے بچنے کے لیے **selective subscriptions** built-in ہیں۔ یہ مختلف mental models استعمال کرتی ہیں: Zustand ایک single store ہے؛ Jotai atomic ہے۔ ## Zustand — ایک سادہ، hook-based store ```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 نہیں — آپ directly setter functions کو کال کرتے ہیں۔ selector (`s => s.count`) کا مطلب ہے کہ component *صرف* اس وقت re-render ہوتا ہے جب وہ slice بدلتا ہے۔ ## Jotai — atomic state ```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** سے state بناتا ہے جو آپ compose کرتے ہیں؛ components انفرادی atoms کو subscribe کرتے ہیں اور صرف اس وقت re-render ہوتے ہیں جب وہ مخصوص atoms تبدیل ہوں۔ ## 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 سے **minimal، ergonomic** global state کی طرف جانے کے لیے جدید رجحان کی نمائندگی کرتے ہیں اور ان میں selective subscriptions built-in ہیں (Context کے re-render مسئلے کو حل کرتے ہوئے)۔ جاننا کہ یہ موجود ہیں — اور یہ کہ Zustand ایک tiny single-store model پیش کرتا ہے جبکہ Jotai composable atoms پیش کرتا ہے — آپ کو ایک lightweight tool منتخب کرنے دیتا ہے جو زیادہ تر apps کی global-state کی ضروریات کے لیے موزوں ہو، heavier Redux Toolkit کو واقعی بڑی، پیچیدہ applications کے لیے محفوظ رکھتے ہوئے۔ Context پر کلیدی مشترکہ فائدہ granular subscriptions ہیں جو over-rendering سے روکتے ہیں۔