Zustand para Iniciantes: Gerenciamento de Estado Simples e Eficiente no React

O gerenciamento de estado em aplicações React pode ser um desafio, especialmente para quem está começando ou busca alternativas mais eficientes. Se você já se sentiu sobrecarregado com a complexidade de Redux ou as limitações da Context API para estados globais, prepare-se para conhecer o Zustand. Esta biblioteca minimalista e altamente performática chegou para simplificar o desenvolvimento, oferecendo uma experiência de gerenciamento de estado descomplicada, sem a necessidade de Providers complexos ou uma curva de aprendizado íngreme.

Neste guia prático e direto ao ponto, vamos desmistificar o Zustand, mostrando como ele pode simplificar o desenvolvimento de aplicações React, otimizar a performance e a experiência de desenvolvimento. Seja você um desenvolvedor iniciante, um QA ou parte de um time pequeno de tecnologia, entender o Zustand abrirá novas portas para construir produtos digitais mais robustos e fáceis de manter.

O que é Zustand e como ele funciona?

Zustand, que significa “estado” em alemão, é uma biblioteca de gerenciamento de estado pequena, rápida e escalável, projetada especificamente para o React. Sua principal característica é a simplicidade e a leveza, eliminando grande parte do boilerplate que outras soluções exigem.

Ao contrário de bibliotecas que dependem de componentes Provider para envolver toda a sua aplicação, o Zustand funciona com uma API baseada em hooks do React. Isso significa que você pode criar e usar seus “stores” (onde o estado e as ações são definidos) em qualquer lugar da sua árvore de componentes, sem a necessidade de um contexto global explícito. Essa abordagem simplifica a estrutura da sua aplicação e reduz a complexidade da árvore de renderização.

O Zustand se destaca por sua filosofia minimalista: ele oferece apenas o essencial para gerenciar o estado, mas com uma performance otimizada. Ele permite que os componentes se inscrevam seletivamente em partes específicas do estado, minimizando re-renders desnecessários e garantindo que apenas os componentes que realmente precisam ser atualizados sejam renderizados novamente.

Zustand vs. Redux vs. Context API: Comparativo Direto

Para entender o valor do Zustand, é útil compará-lo com as soluções mais comuns de gerenciamento de estado no ecossistema React:

• Context API: É a solução nativa do React para passar dados pela árvore de componentes sem ter que passar props manualmente em cada nível. É excelente para dados estáticos ou que mudam com pouca frequência (como temas ou informações de usuário). No entanto, para estados que se atualizam constantemente, a Context API pode causar re-renders desnecessários em componentes que não dependem daquela parte específica do estado, impactando a performance. Sua curva de aprendizado é baixa, mas o boilerplate pode aumentar em cenários complexos.

• Redux: Uma das bibliotecas mais estabelecidas e robustas, o Redux oferece um fluxo de dados unidirecional e previsível, ideal para aplicações de grande escala com lógica de estado complexa e equipes grandes. Ele impõe uma estrutura rígida (ações, reducers, store, middlewares) que, embora garanta consistência e facilidade de depuração, resulta em uma curva de aprendizado mais íngreme e um boilerplate considerável. A performance pode ser otimizada com bibliotecas como reselect, mas exige mais configuração.

• Zustand: Posiciona-se como um meio-termo elegante. Ele oferece a performance e a capacidade de depuração de soluções como Redux, mas com a simplicidade e o baixo boilerplate da Context API. Sua API baseada em hooks é intuitiva para desenvolvedores React, e a ausência de Provider simplifica a integração. Para a maioria das aplicações (pequenas, médias e até muitas grandes), o Zustand geralmente supera a Context API em performance e oferece uma experiência de desenvolvimento mais agradável que o Redux, sem sacrificar a robustez. No entanto, para projetos com lógica de estado extremamente complexa e equipes acostumadas com a estrutura rígida do Redux, este último ainda pode ser preferível.

Em resumo, enquanto a Context API é ótima para dados que não mudam muito, e o Redux brilha em cenários de extrema complexidade e rigidez, o Zustand oferece um equilíbrio ideal de simplicidade, performance e escalabilidade para a maioria dos projetos modernos em React.

Guia Prático: Criando seu Primeiro Store do Zero

Vamos colocar a mão na massa e criar um store Zustand para gerenciar uma lista de desejos (wishlist).

1. Instalação

Primeiro, instale o Zustand em seu projeto React:

npm install zustand
yarn add zustand

2. Criando o Store da Wishlist

Crie um arquivo, por exemplo, src/store/useWishlistStore.ts (ou .js se não estiver usando TypeScript):

import { create } from 'zustand';

interface WishlistItem {
  id: string;
  name: string;
  price: number;
}

interface WishlistState {
  items: WishlistItem[];
  addItem: (item: WishlistItem) => void;
  removeItem: (id: string) => void;
  clearWishlist: () => void;
}

export const useWishlistStore = create<WishlistState>((set) => ({
  items: [],
  addItem: (item) => set((state) => ({
    items: [...state.items, item]
  })),
  removeItem: (id) => set((state) => ({
    items: state.items.filter((item) => item.id !== id)
  })),
  clearWishlist: () => set({ items: [] }),
}));

Neste código:

• create<WishlistState>: Define nosso store e tipa o estado.
• set: É uma função que permite atualizar o estado. Você pode passar um objeto diretamente (para substituir o estado) ou uma função que recebe o estado atual e retorna um novo estado (útil para atualizações baseadas no estado anterior).
• items: É o array que armazena os itens da wishlist.
• addItem, removeItem, clearWishlist: São as ações que modificam o estado. Note que sempre retornamos um novo objeto de estado ou um novo array de itens para garantir a imutabilidade, o que é uma boa prática em React.

3. Usando o Store em Componentes React

Agora, vamos usar este store em um componente. Crie um componente Wishlist.tsx:

import React from 'react';
import { useWishlistStore } from '../store/useWishlistStore';

function Wishlist() {
  const items = useWishlistStore((state) => state.items);
  const removeItem = useWishlistStore((state) => state.removeItem);
  const clearWishlist = useWishlistStore((state) => state.clearWishlist);

  return (
    <div>
      <h2>Minha Lista de Desejos</h2>
      {items.length === 0 ? (
        <p>Sua lista de desejos está vazia.</p>
      ) : (
        <ul>
          {items.map((item) => (
            <li key={item.id}>
              {item.name} - R${item.price.toFixed(2)}
              <button onClick={() => removeItem(item.id)}>Remover</button>
            </li>
          ))}
        </ul>
      )}
      {items.length > 0 && (
        <button onClick={clearWishlist}>Limpar Wishlist</button>
      )}
    </div>
  );
}

export default Wishlist;

E um componente para adicionar itens, ProductCard.tsx:

import React from 'react';
import { useWishlistStore } from '../store/useWishlistStore';

interface ProductProps {
  product: {
    id: string;
    name: string;
    price: number;
  };
}

function ProductCard({ product }: ProductProps) {
  const addItem = useWishlistStore((state) => state.addItem);

  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h3>{product.name}</h3>
      <p>R${product.price.toFixed(2)}</p>
      <button onClick={() => addItem(product)}>Adicionar à Wishlist</button>
    </div>
  );
}

export default ProductCard;

Finalmente, no seu App.tsx:

import React from 'react';
import Wishlist from './components/Wishlist';
import ProductCard from './components/ProductCard';

const products = [
  { id: '1', name: 'Notebook Gamer', price: 5000.00 },
  { id: '2', name: 'Monitor Ultrawide', price: 1500.00 },
  { id: '3', name: 'Teclado Mecânico', price: 400.00 },
];

function App() {
  return (
    <div>
      <h1>Loja de Eletrônicos</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
      <hr />
      <Wishlist />
    </div>
  );
}

export default App;

Com isso, você tem uma aplicação funcional onde o estado da wishlist é gerenciado globalmente pelo Zustand, e os componentes ProductCard e Wishlist interagem com ele de forma simples e direta.

Performance e Seletores: Como Evitar Re-renders Desnecessários

Uma das grandes vantagens do Zustand é sua performance otimizada, alcançada através de “selective subscriptions” (inscrições seletivas). Isso significa que um componente só será renderizado novamente se a parte específica do estado à qual ele está inscrito mudar. No entanto, é crucial usar seletores eficientes para aproveitar ao máximo essa funcionalidade.

Considere o Wishlist componente que criamos. Se você desestruturasse o estado diretamente, assim:

// Abordagem MENOS eficiente para re-renders
function Wishlist() {
  const { items, removeItem, clearWishlist } = useWishlistStore();
  // ...
}

Qualquer alteração em qualquer parte do estado do useWishlistStore (mesmo que fosse uma nova ação adicionada, por exemplo) faria com que o componente Wishlist fosse re-renderizado. Isso ocorre porque a desestruturação direta cria novas referências para todas as propriedades do objeto de estado, fazendo com que o React entenda que “tudo” mudou.

Para evitar isso, use seletores para extrair apenas as partes do estado que o componente realmente precisa. É o que fizemos no exemplo anterior:

// Abordagem MAIS eficiente para re-renders
function Wishlist() {
  const items = useWishlistStore((state) => state.items);
  const removeItem = useWishlistStore((state) => state.removeItem);
  const clearWishlist = useWishlistStore((state) => state.clearWishlist);
  // ...
}

Neste caso, Wishlist só será re-renderizado se state.items mudar, ou se as funções removeItem ou clearWishlist (que são estáveis, a menos que o store seja recriado) mudarem. Se você tiver um estado complexo, pode até criar seletores mais elaborados com shallow para comparar apenas as referências de nível superior, ou memo para seletores computados, garantindo que re-renders ocorram apenas quando estritamente necessário.

Gotcha: Cuidado ao criar objetos ou arrays novos dentro do seletor, pois isso sempre causará um re-render. Por exemplo:

// Isso causará re-render em cada atualização do store, mesmo que os itens não mudem!
const selectedItems = useWishlistStore((state) => state.items.map(item => ({ id: item.id, name: item.name })));

Se precisar de um objeto derivado, use shallow ou memo para otimização.

TypeScript e Middlewares: Persistência e Devtools

O Zustand oferece suporte de primeira classe a TypeScript, o que é um grande benefício para a segurança de tipos e a manutenibilidade do código. Como vimos no exemplo da wishlist, definir interfaces para o estado e as ações torna o desenvolvimento mais robusto e com menos erros.

Além disso, o Zustand é altamente extensível através de middlewares, que adicionam funcionalidades extras ao seu store. Dois dos middlewares mais úteis são persist e devtools.

Persistência de Estado com persist

O middleware persist permite que você salve o estado do seu store em algum tipo de armazenamento (como localStorage ou sessionStorage) e o restaure quando a aplicação for carregada. Isso é ideal para manter o estado entre sessões do usuário.

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

interface UserState {
  token: string | null;
  username: string | null;
  login: (token: string, username: string) => void;
  logout: () => void;
}

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      token: null,
      username: null,
      login: (token, username) => set({ token, username }),
      logout: () => set({ token: null, username: null }),
    }),
    {
      name: 'user-storage', // Nome da chave no localStorage
      storage: createJSONStorage(() => localStorage), // (opcional) define o tipo de armazenamento
    }
  )
);

Agora, o token e username serão automaticamente salvos no localStorage e carregados na inicialização da aplicação.

Integração com Devtools com devtools

O middleware devtools integra seu store com as extensões de Redux DevTools do navegador, permitindo inspecionar o estado, viajar no tempo entre ações e depurar sua aplicação de forma muito mais eficaz.

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

export const useCounterStore = create<CounterState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }), false, 'increment'), // O terceiro argumento é o nome da ação para o devtools
      decrement: () => set((state) => ({ count: state.count - 1 }), false, 'decrement'),
    }),
    { name: 'MyCounterStore' } // Nome do store no devtools
  )
);

Com o devtools ativado, você poderá ver todas as ações e as mudanças de estado no painel do Redux DevTools do seu navegador, facilitando muito a depuração.

Testes, Next.js e React Native: O Zustand Escala?

Uma preocupação comum ao escolher uma biblioteca de gerenciamento de estado é sua adequação para diferentes tamanhos de aplicação e compatibilidade com outros ecossistemas. O Zustand se mostra bastante versátil:

• Tamanhos de Aplicação: O Zustand é uma excelente escolha para aplicações pequenas e médias devido à sua simplicidade e baixo boilerplate. Para aplicações grandes, ele também se comporta muito bem, especialmente se as melhores práticas de seletores forem seguidas. Sua arquitetura modular e a capacidade de criar múltiplos stores independentes permitem uma boa organização do código, escalando sem a complexidade de outras soluções.

• Testes: Testar stores Zustand é relativamente simples, pois eles são funções JavaScript/TypeScript puras. Você pode testá-los isoladamente, sem a necessidade de montar componentes React. Ferramentas como Jest/Vitest e React Testing Library podem ser usadas para testar a lógica do store e como os componentes interagem com ele. Para mais detalhes sobre testes, confira nosso artigo sobre Tipos de Teste de Software.

  // Exemplo de teste simples com Jest/Vitest
  import { useCounterStore } from './useCounterStore';
  
  describe('useCounterStore', () => {
    it('should increment the count', () => {
      useCounterStore.setState({ count: 0 }); // Resetar estado para o teste
      useCounterStore.getState().increment();
      expect(useCounterStore.getState().count).toBe(1);
    });
  
    it('should decrement the count', () => {
      useCounterStore.setState({ count: 1 });
      useCounterStore.getState().decrement();
      expect(useCounterStore.getState().count).toBe(0);
    });
  });

• Next.js: O Zustand é totalmente compatível com Next.js, incluindo Server-Side Rendering (SSR) e Static Site Generation (SSG). Como o Zustand não depende de um Provider na árvore de componentes, ele se integra facilmente com a forma como o Next.js lida com a renderização no servidor. Você pode inicializar o estado no servidor e hidratá-lo no cliente sem problemas.

• React Native: Sim, o Zustand funciona perfeitamente com React Native. A API baseada em hooks e a ausência de dependências específicas do DOM o tornam uma escolha natural para o desenvolvimento mobile, oferecendo a mesma simplicidade e performance que no desenvolvimento web.

Conclusão

O Zustand se estabeleceu como uma solução de gerenciamento de estado poderosa e elegante para o React. Sua abordagem minimalista, a API intuitiva baseada em hooks e a performance otimizada o tornam uma excelente escolha para desenvolvedores que buscam simplificar seus projetos sem sacrificar a robustez. Seja para uma aplicação pequena ou um sistema mais complexo, o Zustand oferece as ferramentas necessárias para gerenciar seu estado de forma eficiente, com menos boilerplate e uma experiência de desenvolvimento mais agradável.

Experimente o Zustand em seu próximo projeto e descubra como ele pode transformar a maneira como você lida com o estado em suas aplicações React.

FAQ

O Zustand substitui completamente a Context API?

Para estados globais e frequentemente atualizados, sim, o Zustand é uma alternativa muito mais performática porque evita re-renders de componentes não relacionados. No entanto, a Context API ainda é útil para passar dados estáticos ou configurações locais na árvore de componentes onde a performance não é uma preocupação crítica.

Como o Zustand lida com a imutabilidade do estado?

O Zustand exige que você retorne um novo estado de forma imutável (usando o operador spread, por exemplo) ao invocar a função set. Para lógicas de estado muito aninhadas e complexas, ele pode ser facilmente integrado ao Immer, um middleware que facilita a escrita de mutações diretas de forma segura, garantindo a imutabilidade por baixo dos panos.

É possível acessar e modificar o estado do Zustand fora de componentes React?

Sim. Uma das grandes vantagens do Zustand é que o store expõe métodos como getState() e setState() que podem ser chamados em qualquer arquivo JavaScript/TypeScript puro, fora do contexto de componentes React. Isso facilita a integração com serviços de API, websockets, ou qualquer lógica de negócio que precise interagir com o estado global sem estar acoplada à UI.