Gerenciamento de Estado Simples e Eficaz com Zustand no React

Introdução: Por que considerar o Zustand?

Em projetos React, chega um momento em que o gerenciamento de estado global se torna necessário. Ferramentas como Redux são poderosas, mas podem trazer muita complexidade para casos simples. É aí que o Zustand se destaca: uma biblioteca minimalista, sem boilerplate, com API direta e suporte a middlewares e persistência.

Ideal para devs iniciantes e intermediários que querem mais controle e menos complicação.

Instalando o Zustand

Primeiro, instale a biblioteca:

npm install zustand
# ou
yarn add zustand

Criando um store com Zustand

Vamos criar um contador simples para entender o básico:

// src/store/useCounterStore.ts
import { create } from 'zustand'
 
interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
}
 
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

Usando o store no componente

import { useCounterStore } from './store/useCounterStore'
 
export function Counter() {
  const { count, increment, decrement } = useCounterStore()
 
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  )
}

Simples, direto, sem Provider.

Boas práticas com Zustand

🔁 Seletores para evitar re-renderizações desnecessárias

Evite acessar o estado inteiro se não for necessário:

const count = useCounterStore((state) => state.count)

📦 Organização por arquivos

Crie um arquivo de store por domínio da aplicação (ex: useAuthStore, useCartStore), mantendo o código modular.

🧪 Testabilidade

O Zustand facilita testes por permitir criar stores isolados e mockáveis com facilidade.

Recursos avançados

✅ Persistência (ex: localStorage)

import { create } from 'zustand'
import { persist } from 'zustand/middleware'
 
const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      login: (user) => set({ user }),
      logout: () => set({ user: null }),
    }),
    { name: 'auth-storage' }
  )
)

🧩 Middleware (ex: devtools)

import { devtools } from 'zustand/middleware'
 
const useStore = create(devtools((set) => ({ ... })))

Erros comuns e como evitar

Acessar estado inteiro desnecessariamente: isso causa re-renderizações desnecessárias.
Misturar lógica demais no componente: deixe a lógica de estado no store.
Falta de persistência onde é necessário: use middleware como persist para manter o estado mesmo após reload.

Conclusão

Zustand é uma excelente escolha para gerenciamento de estado em aplicações React modernas. Sua simplicidade e poder tornam o desenvolvimento mais fluido, especialmente em projetos pequenos e médios.

Experimente aplicá-lo em seus projetos e veja a diferença!

👉 Dica final: Curtiu? Compartilhe com colegas e teste o Zustand no seu próximo app!