Hoe verschillen lichte stores zoals Zustand en Jotai van Redux?

Question

Accepted Answer

**Zustand** en **Jotai** zijn minimale state libraries die globale state bereiken met veel minder boilerplate dan Redux, en met ingebouwde **selectieve subscriptions** om onnodige re-renders te voorkomen. Ze hanteren verschillende mentale modellen: Zustand is een enkele store; Jotai is atomair. ## Zustand — een eenvoudige, hook-gebaseerde 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 ; } ``` Geen provider, geen actions, geen reducers, geen dispatch — je roept setter-functies direct aan. De selector (`s => s.count`) betekent dat de component *alleen* opnieuw rendert wanneer dat slice verandert. ## Jotai — atomaire 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 bouwt state op uit kleine **atoms** die je samenstelt; componenten abonneren zich op individuele atoms en renderen alleen opnieuw wanneer die specifieke atoms veranderen. ## Vergelijking met 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 ``` ## Wanneer wat kiezen ```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 ``` ## Waarom het belangrijk is Zustand en Jotai vertegenwoordigen de moderne trend weg van Redux's boilerplate naar **minimale, ergonomische** globale state met ingebouwde selectieve subscriptions (wat Context's re-render-probleem oplost). Weten dat ze bestaan — en dat Zustand een minuscuul single-store-model biedt terwijl Jotai samengestelde atoms biedt — stelt je in staat een lichte tool te kiezen die past bij de behoeften van de meeste apps wat globale state betreft, terwijl je zwaarder Redux Toolkit reserveert voor echt grote, complexe applicaties. Het belangrijkste gedeelde voordeel boven Context zijn granulaire subscriptions die overrendering voorkomen.