English 中文 العربية 日本語 Português

Zustand Zustand: Biblioteca de Estado

Última atualização: 2026-11-03

Zustand Zustand: Biblioteca de Estado

O Zustand é uma biblioteca de estado global mínima: create define um store, os componentes o chamam como um Hook personalizado, o estado é compartilhado entre componentes e nenhum Provider é necessário. O núcleo são apenas duas funções, set e get, não há boilerplate, e é o substituto popular do Redux em projetos pequenos e médios onde um store completo com actions, reducers e middleware seria cerimônia demais.

GrupoRoteamento e Gerenciamento
TipoBiblioteca
DesdeZustand v4 / v5

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

import { create } from 'zustand'

const useStore = create((set, get) => ({
  count: 0,                                       // state
  inc: () => set(s => ({ count: s.count + 1 })),  // action
  reset: () => set({ count: 0 })
}))

// Inside a component (no Provider required)
const count = useStore(s => s.count)   // subscribe to a slice, update precisely
const inc = useStore(s => s.inc)

⚙️ Parâmetros

selectorO seletor de estado passado ao chamar o Hook do store, por exemplo, s => s.count; omita-o e você assina o store inteiro, então qualquer mudança re-renderiza.

Retorna：create retorna um Hook: chamá-lo retorna a fatia selecionada do estado; set mescla o estado e dispara atualizações nos componentes inscritos, get lê o estado mais recente.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Clicar no botão A muda o número que o componente B lê — os dois componentes não compartilham um pai que passe props, o store externo os mantém sincronizados, e é exatamente assim que o Zustand funciona (demonstração simulada).
▶ Experimente

💡 Pontos-chave

💡 Dica Um seletor que retorna um objeto (s => ({ a: s.a, b: s.b })) cria uma nova referência toda vez e causa renderizações extras; use uma comparação rasa ou divida-o em várias chamadas.
ℹ️ Informação O middleware persist sincroniza o store com localStorage e o middleware devtools conecta-se ao Redux DevTools — ambos a um único import de distância.
⚠️ Aviso set é uma mesclagem rasa: para objetos aninhados, espalhe-os você mesmo com set(s => ({ deep: { ...s.deep, x: 1 } })); não há mesclagem profunda automática.
redux-toolkit usecontext custom-hooks uselocalstorage
Mais casos em breve.

📚 Tutoriais Relacionados

Gerenciamento de Estado
Lição 18: Zustand e Redux Toolkit comparados na prática.

❓ Perguntas Frequentes

P Por que o Zustand não precisa de um Provider?
R O estado vive em uma variável no nível do módulo e não depende de Context; os componentes se inscrevem nele diretamente com useSyncExternalStore, então é compartilhado entre componentes por natureza.
P Como persisto o estado?
R Importe { persist } de 'zustand/middleware' e envolva o criador em persist(fn, { name: 'key' }) dentro de create; ele lê e escreve localStorage para você.
P Como escrevo uma action assíncrona?
R Uma action é apenas uma função: fetchUser: async () => { const data = await api(); set({ user: data }) }. Não há distinção entre thunks e reducers.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%