Zustand no React: Gerenciamento de Estado Descomplicado para Suas Aplicações

Gerenciar estados globais em aplicações React frequentemente leva desenvolvedores a um dilema: usar a Context API e enfrentar problemas de performance com re-renderizações excessivas, ou adotar bibliotecas robustas como Redux, que exigem uma quantidade considerável de código repetitivo (boilerplate).

O Zustand surge como uma alternativa que equilibra simplicidade e performance. Ele é uma biblioteca de gerenciamento de estado pequena, rápida e baseada em hooks, que elimina a necessidade de envolver sua aplicação em Providers.

Por que o Zustand se tornou a escolha de muitos desenvolvedores React?

A filosofia do Zustand é a simplicidade. Diferente de outras soluções, ele não força uma estrutura rígida de ações e reducers. Ele utiliza um modelo de store centralizado onde você define o estado e as funções para modificá-lo diretamente, tornando o código mais legível e fácil de manter.

Zustand vs. Redux vs. Context API: Quando usar cada um?

• Context API: Ideal para estados que mudam raramente, como temas (dark/light mode) ou dados de autenticação simples. O uso excessivo pode causar re-renderizações em toda a árvore de componentes.
• Redux: Continua sendo uma excelente escolha para aplicações de grande escala, onde a previsibilidade, o debugging avançado e a rastreabilidade de ações são cruciais.
• Zustand: Preenche o espaço entre os dois. É perfeito para a maioria das aplicações de pequeno a médio porte, onde você precisa de um estado global performático sem a complexidade de configuração do Redux.

Mão na massa: Configurando seu primeiro store

Instale o Zustand no seu projeto:

npm install zustand

Criar um store é direto. Veja um exemplo para um carrinho de compras:

import { create } from 'zustand';

const useStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (id) => set((state) => ({
    items: state.items.filter((i) => i.id !== id)
  })),
}));

Lendo e atualizando o estado sem Providers

Você não precisa de um StoreProvider no topo da sua aplicação. Basta importar o hook useStore onde precisar:

function Cart() {
  const items = useStore((state) => state.items);
  const addItem = useStore((state) => state.addItem);

  return (
    <button onClick={() => addItem({ id: 1, name: 'Produto' })}>
      Adicionar: {items.length}
    </button>
  );
}

Otimizando a performance com seletores

O segredo da performance no Zustand está nos seletores. Ao passar uma função para o hook, você garante que o componente só re-renderize quando aquela parte específica do estado mudar:

// O componente só re-renderiza se 'user' mudar
const user = useStore(state => state.user);

Boas práticas para organizar seus stores

1. Divida por domínio: Não crie um único store gigante. Crie arquivos separados para useAuthStore, useCartStore, etc.
2. Mantenha a lógica simples: Se a lógica de atualização for muito complexa, mova-a para funções utilitárias fora do store.
3. Use seletores: Sempre selecione apenas o dado necessário para evitar renderizações desnecessárias.

Para quem está começando, entender como estruturar o projeto é fundamental. Confira nosso guia sobre como criar um projeto em react para aplicar essas práticas desde o início.

FAQ

O Zustand substitui completamente a Context API?

Não. A Context API é excelente para estados que mudam raramente. O Zustand é superior quando você tem estados que mudam frequentemente e quer evitar re-renderizações desnecessárias.

Devo migrar meu projeto Redux para Zustand?

Não necessariamente. Se o seu projeto Redux funciona bem e a equipe está adaptada, não há motivo para migrar. O Zustand é uma escolha excelente para novos projetos.

Como o Zustand lida com a performance em componentes?

O Zustand utiliza seletores que permitem que um componente assine apenas uma parte específica do estado. Assim, o componente só re-renderiza quando aquele dado específico é alterado.