Zustand र Jotai जस्ता हल्का stores Redux बाट कसरी भिन्न छन्?

Question

Accepted Answer

**Zustand** र **Jotai** न्यूनतम state libraries हुन् जो Redux भन्दा धेरै कम boilerplate संग global state प्राप्त गर्छन्, र अनावश्यक re-renders बचाउनको लागि built-in **selective subscriptions** संग आउँछन्। तिनीहरू फरक फरक मानसिक मोडेलहरू लिन्छन्: Zustand एकल store हो; Jotai atomic हो। ## Zustand — एक साधारण, hook-आधारित 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 छैन — तपाई setter functions सीधै कल गर्नुहुन्छ। selector (`s => s.count`) को मतलब component *केवल* जब त्यो slice परिवर्तन हुँदा re-render हुन्छ। ## 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 मा सदस्यता लिन्छन् र केवल जब ती specific atoms परिवर्तन हुँदा 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** global state तर्फको आधुनिक प्रवृत्ति प्रतिनिधित्व गर्छन् built-in selective subscriptions संग (Context को re-render समस्या समाधान गर्दै)। थाहा छ कि तिनीहरू अस्तित्वमा छन् — र Zustand एक सानो single-store मोडेल प्रदान गर्छ जबकि Jotai composable atoms प्रदान गर्छ — तपाइंलाई अधिकांश apps को global-state आवश्यकताहरु मा फिट हुने हल्का tool छनौट गर्न दिन्छ, genuinely ठुलो, जटिल अनुप्रयोगहरुको लागि भारी Redux Toolkit आरक्षित गर्दै। Context मा मुख्य साझा फाइदा granular subscriptions हो जो over-rendering बचाता है।