Come differiscono gli store leggeri come Zustand e Jotai da Redux?

Question

Accepted Answer

**Zustand** e **Jotai** sono librerie di stato minimaliste che permettono di gestire lo stato globale con molto meno boilerplate rispetto a Redux e con **sottoscrizioni selettive** integrate per evitare re-render non necessari. Utilizzano modelli mentali diversi: Zustand è un singolo store; Jotai è atomico. ## Zustand — uno store semplice basato su 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 ; } ``` Nessun provider, nessuna action, nessun reducer, nessun dispatch — chiami direttamente le funzioni di settaggio. Il selettore (`s => s.count`) significa che il componente esegue il re-render *solo* quando quella slice cambia. ## Jotai — stato atomico ```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 costruisce lo stato da piccoli **atomi** che componi; i componenti si sottoscrivono a singoli atomi e eseguono il re-render solo quando quegli atomi specifici cambiano. ## Confronto con 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 ``` ## Quando scegliere cosa ```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 ``` ## Perché è importante Zustand e Jotai rappresentano la tendenza moderna di allontanarsi dal boilerplate di Redux verso uno stato globale **minimalista ed ergonomico** con sottoscrizioni selettive integrate (risolvendo il problema di re-render di Context). Sapere che esistono — e che Zustand offre un modello di singolo store minuscolo mentre Jotai offre atomi componibili — ti permette di scegliere uno strumento leggero adatto alle esigenze di stato globale della maggior parte delle app, riservando Redux Toolkit più pesante per applicazioni genuinamente grandi e complesse. Il vantaggio condiviso chiave rispetto a Context è la sottoscrizione granulare che previene il over-rendering.