Gerenciamento de Estado em React: por que e como usar o Zustand | Alura Cursos Online
Gerenciamento de Estado em React: por que e como usar o Zustand
6 min6 minutos de leitura
6 min6 minutos de leitura
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 , e é o pesadelo de qualquer desenvolvedor.
Autor(a)
Rafaela Petelin Silvério
Sou Bacharela em Sistemas de Informação, Técnica em Desenvolvimento de Sistemas pela ETEC e atuo como Analista de Suporte Educacional na Alura, onde respondo as dúvidas que surgem no fórum, principalmente na área de Front-end.
Sou apaixonada por tecnologia e busco sempre aprender coisas novas. Meus hobbies favoritos são ler, estudar novos idiomas e assistir séries de comédia.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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:
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.
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.
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.
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:
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.
Performance: Apenas os componentes que usam o dado alterado são renderizados.
Código Limpo: Sem Providers aninhados ou complexidade desnecessária.
