Redux foi, por muito tempo, sinônimo de React. Mas ele trouxe uma carga cognitiva imensa: Actions, Reducers, Dispatchers, Selectors, Providers...
Aí chegou o Zustand (alemão para "Estado"). Pequeno, rápido e sem Providers.
A Diferença Conceitual
Redux (Flux Pattern Rígido)
Exige que você envolva sua aplicação em um <Provider>, o que pode causar re-renderizações desnecessárias se não usar seletores com cuidado. É muito verboso, mesmo com Redux Toolkit.
Zustand (Hooks-based)
O Zustand vive fora da árvore de componentes do React, mas se conecta via Hooks.
// store.js
import { create } from 'zustand'
const useStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
// Component.js
function BearCounter() {
// Seleciona APENAS o que precisa. Se 'removeAllBears' mudar, esse componente NÃO re-renderiza.
const bears = useStore((state) => state.bears)
return <h1>{bears} around here...</h1>
}
Por que Zustand?
- Zero Boilerplate: Defina o store e use. Simples assim.
- Transient Updates: Pode atualizar o estado sem re-renderizar componentes (útil para animações/canvas).
- Sem Context API: Evita o "Context Hell" e problemas de performance do Context.
Quando usar Redux ainda?
Redux ainda tem seu lugar em aplicações Enterprise Gigantescas onde a rastreabilidade (Time Travel Debugging) de cada evento é crucial para auditoria ou debug complexo, e onde há times separados cuidando apenas do State.
Para 95% das aplicações modernas, Zustand (ou Jotai para Atomic State) é a escolha superior em produtividade e performance.