Piye carane lightweight store kaya Zustand lan Jotai beda karo Redux?

Question

Accepted Answer

**Zustand** lan **Jotai** minangka pustaka negara minimalista sing nyapai negara global kanthi boilerplate sing luwih murah tinimbang Redux, lan kanthi **selective subscriptions** sing embedded kanggo nyegah re-renders sing ora perlu. Padha nyandang model mental sing beda: Zustand iku toko siji; Jotai iku atomik. ## Zustand — toko sing prasaja, berbasis 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 ; } ``` Tanpa provider, tanpa aksi, tanpa reducer, tanpa dispatch — sampeyan nelpon fungsi setter kanthi langsung. Selector (`s => s.count`) nandheske komponen re-render *mung* nalika irisan kuwi berubah. ## Jotai — negara atomik ```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 nbangun negara saka **atom** cilik sing sampeyan gabung; komponen nsubscribe menyang atom individu lan mung re-render nalika atom-atom spesifik kuwi berubah. ## Perbandingan karo 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 ``` ## Kapan milih apa ```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 ``` ## Mengapa Kahanane Zustand lan Jotai nggambarake tren modern adoh saka boilerplate Redux menyang negara global sing **minimal, ergonomik** kanthi selective subscriptions sing embedded (ngatasi masalah re-render Context). Gawe telu kalawan eksistensi padha — lan yen Zustand menawarake model toko tunggal cilik nalika Jotai nawarake atom composable — nglilongake sampeyan milih alat enteng sing cocog karo kabutuhan global-negara aplikasi akeh, nglalani Redux Toolkit sing luwih abot kanggo aplikasi sing temenan gedhe lan rumit. Keuntungan dikongsi tomoe tinimbang Context minangka granular subscriptions sing ngalang-alangi over-rendering.