Hvordan skiller lette lagre som Zustand og Jotai seg fra Redux?

Question

Accepted Answer

**Zustand** og **Jotai** er minimale state-biblioteker som oppnår global state med langt mindre boilerplate enn Redux, og med innebygde **selektive abonnementer** for å unngå unødvendige re-renders. De bruker ulike mentale modeller: Zustand er en enkelt store; Jotai er atomisk. ## Zustand — en enkel, hook-basert 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 ; } ``` Ikke noe provider, ingen actions, ingen reducers, ingen dispatch — du kaller setter-funksjoner direkte. Selektoren (`s => s.count`) betyr at komponenten re-rendres *bare* når den delen endres. ## Jotai — atomisk 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 bygger state fra små **atomer** du komponerer; komponenter abonnerer på individuelle atomer og re-rendres bare når disse spesifikke atomene endres. ## Sammenligning med 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 ``` ## Når du skal velge hva ```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 ``` ## Hvorfor det betyr noe Zustand og Jotai representerer den moderne trenden bort fra Reduxs boilerplate mot **minimal, ergonomisk** global state med innebygde selektive abonnementer (som løser Contexts re-render-problem). Å vite at de eksisterer — og at Zustand tilbyr en tiny single-store-modell mens Jotai tilbyr komponerbare atomer — lar deg velge et lett verktøy som passer de fleste appenes global-state-behov, og reserverer tungere Redux Toolkit for virkelig store, komplekse applikasjoner. Den viktigste delte fordelen over Context er granulære abonnementer som forhindrer over-rendering.