Gerenciamento de Estado em React: por que e como usar o Zustand

Fala, Dev! Imagine que você tem uma loja online. Seu cliente está navegando pela vitrine e vê um tênis incrível. Ele clica no coração para salvar na Wishlist (Lista de desejos). Agora, o ícone de coração lá no topo da página precisa atualizar e a lista de favoritos lá no final da página precisa mostrar o item. 

No React básico, você teria que carregar esse "estado" (a lista de desejos) lá do topo da sua aplicação e sair passando por todos os componentes via props até chegar no botão. Isso é o que chamamos de Prop Drilling, e é o pesadelo de qualquer desenvolvedor. 

Hoje, vamos resolver isso com o Zustand: uma solução leve, rápida e que vai deixar sua loja organizada sem precisar de "malabarismos" com o código. 

Nota sobre o visual: Para este guia, usei uma estilização minimalista diretamente no código (inline) para facilitar o seu teste. O foco aqui é o Zustand, mas se quiser o mesmo visual na sua lojinha, é só copiar os estilos abaixo! 

Pré-requisitos para esse projeto 

Antes de colocar a mão na massa, você precisa ter o seguinte preparado: 

• Conhecimentos necessários: Lógica de programação com JavaScript e conceitos básicos de React (Hooks como useState). 
• Ambiente: Node.js instalado (v18 ou superior recomendado). 
• Versões utilizadas: React 18+ e Zustand 5.0.12. 

Como usar Zustand em seu projeto: gerenciando estado em uma wishlist 

Durante o processo de uso do Zustand em projetos, podem surgir algumas dúvidas. Aqui vai o passo a passo para gerenciar estado em uma wishlist.

1. Preparando o Ambiente 

O primeiro passo é criar a estrutura do projeto e instalar a biblioteca que fará o gerenciamento de estado. No terminal, faremos o seguinte: 

npm create vite@latest wishlist-zustand -- --template react 
cd wishlist-zustand 
npm install zustand 

O que faremos com o Zustand aqui? Apenas preparamos o ambiente para que as funções do Zustand estejam disponíveis no node_modules. 

2. Criando a Store 

Aqui é onde o Zustand vai brilhar. Vamos criar uma "store central" que qualquer componente poderá acessar sem precisar de intermediários. 

import { create } from 'zustand'; 
 
const useWishlistStore = create((set) => ({ 
  wishlist: [], 
  addToWishlist: (product) =>  
    set((state) => ({  
      wishlist: [...state.wishlist, product]  
    })), 
  removeFromWishlist: (productId) =>  
    set((state) => ({  
      wishlist: state.wishlist.filter((p) => p.id !== productId)  
    })), 
})); 
 
export default useWishlistStore; 
 

O que faremos com o Zustand aqui? Usamos a função create para definir o estado inicial (wishlist) e as funções que podem alterá-lo (set). Ao contrário da Context API, não precisamos criar um Provider, pois o estado agora é acessível via hook. 

3. A Vitrine de Produtos 

Vamos construir a vitrine onde os produtos ficam: 

import useWishlistStore from '../store/useWishlistStore'; 
 
const products = [ 
  { id: 1, name: 'Tênis de Corrida', price: 'R$ 299' }, 
  { id: 2, name: 'Fone Bluetooth', price: 'R$ 150' }, 
  { id: 3, name: 'Mochila Tech', price: 'R$ 180' }, 
]; 
 
function ProductList() { 
  const add = useWishlistStore((state) => state.addToWishlist); 
  const currentWishlist = useWishlistStore((state) => state.wishlist); 
 
  return ( 
    <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}> 
      {products.map((product) => { 
        const isFavorite = currentWishlist.some(item => item.id === product.id); 
         
        return ( 
          <div key={product.id} style={{ border: '1px solid #ddd', borderRadius: '12px', padding: '16px', textAlign: 'center', boxShadow: '0 4px 6px rgba(0,0,0,0.05)' }}> 
            <h3 style={{ fontSize: '1.1rem', marginBottom: '8px' }}>{product.name}</h3> 
            <p style={{ color: '#666', fontWeight: 'bold' }}>{product.price}</p> 
            <button  
              disabled={isFavorite} 
              onClick={() => add(product)} 
              style={{  
                backgroundColor: isFavorite ? '#ccc' : '#ff4d4d',  
                color: 'white', border: 'none', padding: '8px 16px', borderRadius: '20px', cursor: 'pointer', transition: '0.3s'  
              }}> 
              {isFavorite ? 'Na Lista' : 'Favoritar'} 
            </button> 
          </div> 
        ); 
      })} 
    </section> 
  ); 
} 
 
export default ProductList; 

O que faremos com o Zustand aqui? Usamos o seletor useWishlistStore((state) => state.addToWishlist) para extrair apenas a função necessária. Isso garante que o componente só reaja a mudanças específicas e tenha acesso direto para disparar ações globais. 

4. A Lista de Desejos 

Por fim, o componente que exibe os itens salvos: 

import useWishlistStore from '../store/useWishlistStore'; 
 
function Wishlist() { 
  const { wishlist, removeFromWishlist } = { ...useWishlistStore() }; 
 
  return ( 
    <div style={{ background: '#fdf2f2', padding: '24px', borderRadius: '16px', marginTop: '40px' }}> 
      <h2 style={{ color: '#d32f2f' }}>Minha Wishlist ({wishlist.length})</h2> 
      {wishlist.length === 0 ? <p>Sua lista está vazia. Comece a favoritar!</p> : ( 
        <ul style={{ listStyle: 'none', padding: 0 }}> 
          {wishlist.map((item) => ( 
            <li key={item.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid #eee' }}> 
              <span>{item.name}</span> 
              <button onClick={() => removeFromWishlist(item.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.2rem' }}>Remover</button> 
            </li> 
          ))} 
        </ul> 
      )} 
    </div> 
  ); 
} 
 
export default Wishlist; 

O que faremos com o Zustand aqui? Extraímos tanto o valor (wishlist) quanto a função de remoção. O componente agora está "inscrito" na store e será renderizado novamente de forma automática sempre que um item for adicionado ou removido. 

O projeto ficou assim: 

Se quiser consultar, o código completo pode ser encontrado nesse repositório. 

Quer dominar React e levar seu desenvolvimento para o próximo nível? 

Dominar React deixou de ser um diferencial opcional para se tornar uma das habilidades mais valorizadas no desenvolvimento front-end.

Como uma das bibliotecas mais utilizadas pelo mercado, o React é amplamente adotado por empresas de diferentes portes para criar interfaces modernas, rápidas e escaláveis.

Confira a Carreira Desenvolvimento Front-End React na Alura e aprenda as melhores práticas do mercado! 

Até a próxima! 

FAQ | Perguntas Frequentes sobre React (FAQ) 

1. Porque usar Zustand?  

Ao contrário da Context API ou Redux, o Zustand oferece uma solução de estado global extremamente leve e performática, eliminando a necessidade de reducers complexos ou do excesso de providers.

Ele resolve o problema de prop drilling de forma simples, permitindo que qualquer componente acesse a store através de hooks personalizados, o que torna o desenvolvimento front-end muito mais ágil e o código mais fácil de manter. 

2. Qual a diferença entre Zustand e Context API?  

A Context API requer que você envolva componentes em um Provider, o que pode causar renderizações desnecessárias em toda a árvore. O Zustand é um hook externo que não precisa de providers e permite que os componentes assinem apenas fatias específicas do estado. 

3. Qual a diferença entre Zustand e Redux?  

O Redux é conhecido por seu "boilerplate" (código repetitivo necessário para configurar uma funcionalidade) extenso (actions, reducers, types). O Zustand oferece as mesmas vantagens de uma store centralizada, mas de forma minimalista, sem a necessidade de configurações complexas para começar. 

4. O Zustand funciona com TypeScript?  

Sim! Ele possui suporte nativo de primeira classe ao TypeScript, facilitando a tipagem de stores e garantindo segurança no código. 

Vantagens de usar Zustand no Gerenciamento de Estado React 

Ao usar o Zustand no seu projeto de wishlist, você resolveu três problemas clássicos: 

1. Contexto Global: O botão de favoritar não precisa saber nada sobre o componente da lista, ele só avisa a "store central" que algo mudou. 
2. Performance: Apenas os componentes que usam o dado alterado são renderizados. 
3. Código Limpo: Sem Providers aninhados ou complexidade desnecessária.