Como as lojas leves como Zustand e Jotai diferem do Redux?

Question

Accepted Answer

**Zustand** e **Jotai** são bibliotecas de estado minimalistas que alcançam estado global com muito menos boilerplate do que Redux, e com **subscrições seletivas** integradas para evitar re-renderizações desnecessárias. Elas adotam modelos mentais diferentes: Zustand é uma única store; Jotai é atômico. ## Zustand — uma store simples baseada em hooks ```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 ; } ``` Sem provider, sem actions, sem reducers, sem dispatch — você chama funções setter diretamente. O seletor (`s => s.count`) significa que o componente re-renderiza *apenas* quando aquele slice muda. ## Jotai — estado atômico ```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 constrói estado a partir de pequenos **atoms** que você compõe; componentes se inscrevem em átomos individuais e re-renderizam apenas quando esses átomos específicos mudam. ## Comparação com 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 escolher o quê ```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 ``` ## Por que isso importa Zustand e Jotai representam a tendência moderna de se afastar do boilerplate do Redux em direção a estado global **minimalista e ergonômico** com subscrições seletivas integradas (resolvendo o problema de re-renderização do Context). Saber que existem — e que Zustand oferece um modelo de loja única minúscula enquanto Jotai oferece atoms compostos — permite que você escolha uma ferramenta leve que se adeque às necessidades de estado global da maioria das aplicações, reservando o Redux Toolkit mais pesado para aplicações genuinamente grandes e complexas. A principal vantagem compartilhada sobre Context são as subscrições granulares que previnem sobre-renderização.