Configuração e Uso Básico do Zustand

Q: O que a função create retorna e como usá-la?

create retorna um hook React (por exemplo, useCounterStore) que se inscreve no store. Chame-o com um seletor dentro de um componente: useCounterStore((state) => state.count). O store em si é um objeto JavaScript vanilla gerenciado fora do React.

Q: Por que você passa uma função seletora para o hook do store em vez de desestruturar?

Seletores como (state) => state.count se inscrevem apenas nessa fatia do estado. O componente só re-renderiza quando o valor selecionado muda. Desestruturar sem um seletor (const { count } = useStore()) se inscreve no store inteiro, causando re-renderizações a cada mudança.

Q: Como funciona o set -- ele substitui ou mescla o estado?

Por padrão, set realiza uma mesclagem rasa (shallow merge) do estado parcial no estado atual. Para substituir o estado inteiro, passe true como segundo argumento: set({ count: 0 }, true). Objetos aninhados devem ser espalhados manualmente, pois a mesclagem é apenas de um nível.

Q: Qual a diferença entre set({ count: 0 }) e set((state) => ({ count: state.count + 1 }))?

set({ count: 0 }) define um valor estático, independentemente do estado atual. set((state) => ...) calcula o próximo estado com base no estado atual, o que é necessário para incrementos, toggles e atualizações derivadas.

Q: Armadilha: O que acontece se você selecionar o store inteiro sem um seletor?

Chamar useStore() sem um seletor se inscreve em todas as propriedades do store. O componente re-renderiza em qualquer mudança de estado, mesmo em campos não relacionados. Sempre use um seletor para evitar re-renderizações desnecessárias.

Q: Armadilha: Por que set({ user: { name: "new" } }) não preserva outros campos do usuário?

set faz uma mesclagem rasa apenas no nível superior. Objetos aninhados são substituídos inteiramente, não mesclados. Você deve espalhar manualmente: set((s) => ({ user: { ...s.user, name: "new" } })).

Q: Como tipar um store Zustand em TypeScript?

Passe a interface do estado como um genérico para create(). Ações e estado vivem juntos na mesma interface.

Q: Que tipo o set aceita em TypeScript?

set aceita Partial ou (state: State) => Partial. TypeScript garante que você só defina propriedades que existem na interface de estado.

Q: Por que o exemplo de produção usa parênteses duplos create()((...) => ...)?

O primeiro () é necessário ao usar genéricos TypeScript com middleware. Ele também habilita o encadeamento de middleware: create()(persist(devtools((set) => ...))). Sem middleware, create((set) => ...) (invocação única) é suficiente.

Receita

Instale o Zustand, crie um store com create e consuma-o em qualquer componente sem providers ou wrappers de context.

npm install zustand

// stores/counter-store.ts
import { create } from "zustand";
 
interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}
 
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

"use client";
 
import { useCounterStore } from "@/stores/counter-store";
 
function Counter() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

Exemplo de Trabalho

// stores/todo-store.ts
import { create } from "zustand";
 
interface Todo {
  id: string;
  text: string;
  done: boolean;
}
 
interface TodoState {
  todos: Todo[];
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
  removeTodo: (id: string) => void;
  clearCompleted: () => void;
}
 
export const useTodoStore = create<TodoState>((set) => ({
  todos: [],
 
  addTodo: (text) =>
    set((state) => ({
      todos: [...state.todos, { id: crypto.randomUUID(), text, done: false }],
    })),
 
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
    })),
 
  removeTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((t) => t.id !== id),
    })),
 
  clearCompleted: () =>
    set((state) => ({
      todos: state.todos.filter((t) => !t.done),
    })),
}));

// components/todo-app.tsx
"use client";
 
import { useState } from "react";
import { useTodoStore } from "@/stores/todo-store";
 
export function TodoApp() {
  const [input, setInput] = useState("");
  const todos = useTodoStore((s) => s.todos);
  const addTodo = useTodoStore((s) => s.addTodo);
  const toggleTodo = useTodoStore((s) => s.toggleTodo);
  const removeTodo = useTodoStore((s) => s.removeTodo);
  const clearCompleted = useTodoStore((s) => s.clearCompleted);
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      addTodo(input.trim());
      setInput("");
    }
  };
 
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">Add</button>
      </form>
 
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <label>
              <input
                type="checkbox"
                checked={todo.done}
                onChange={() => toggleTodo(todo.id)}
              />
              <span style={{ textDecoration: todo.done ? "line-through" : "none" }}>
                {todo.text}
              </span>
            </label>
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
 
      <button onClick={clearCompleted}>Clear completed</button>
      <p>{todos.filter((t) => !t.done).length} items remaining</p>
    </div>
  );
}

Mergulho Profundo

Como Funciona

create retorna um hook React que se inscreve no store. O store em si é um objeto JavaScript vanilla gerenciado fora do React.
A função set mescla o estado parcial no estado atual (mesclagem rasa por padrão).
Componentes só re-renderizam quando a fatia do estado que eles selecionam muda. Esta é a principal vantagem de desempenho do Zustand sobre o Context.
Nenhum Provider é necessário. O store é um singleton de nível de módulo que qualquer componente pode importar e usar diretamente.
set pode aceitar um objeto (mesclado) ou uma função (state) => partialState (para atualizações baseadas no estado atual).

Variações

Obtendo o estado completo (não recomendado para desempenho):

const { count, increment } = useCounterStore();
// Re-renderiza em QUALQUER mudança de estado

Usando o store fora do React:

// Acessa o estado diretamente (sem hooks)
const count = useCounterStore.getState().count;
 
// Inscreve-se em mudanças
const unsub = useCounterStore.subscribe((state) => {
  console.log("Count changed:", state.count);
});

Substitui o estado em vez de mesclar:

set({ count: 0 }, true); // Segundo argumento `true` substitui o estado inteiro

Notas de TypeScript

Sempre passe a interface do estado como um genérico para create<State>().
Ações (funções) vivem ao lado do estado na mesma interface.
set é tipado para aceitar Partial<State> ou (state: State) => Partial<State>.

import { create, StoreApi } from "zustand";
 
type Store = StoreApi<CounterState>;

Armadilhas

Selecionar o store inteiro (useStore() sem um seletor) faz com que o componente re-renderize a cada mudança de estado. Sempre use seletores.
set realiza uma mesclagem rasa (shallow merge). Objetos aninhados devem ser espalhados manualmente: set({ user: { ...state.user, name: "new" } }).
O store é um singleton. Em ambientes SSR (Next.js), um único store é compartilhado entre todas as requisições, a menos que você crie instâncias por requisição.
Não desestruture o hook do store no nível do módulo. Chame-o apenas dentro dos componentes.
set é síncrono. A atualização do estado e o re-render ocorrem no mesmo tick (agrupados pelo React 18+).

Alternativas

Abordagem	Prós	Contras
Zustand	Sem providers, API mínima, seletores rápidos	Singleton em SSR, curva de aprendizado para middleware
React Context	Integrado, sem dependências	Re-renderiza todos os consumidores, sem seletores
Redux Toolkit	Ecossistema maduro, DevTools	Boilerplate, configuração complexa
Jotai	Modelo atômico, de baixo para cima	Modelo mental diferente, muitos átomos para gerenciar

Exemplo do Mundo Real

De uma aplicação SaaS de produção Next.js 15 / React 19 (SystemsArchitect.io).

// Exemplo de produção: Store de autenticação
// Arquivo: src/stores/auth.ts
import { create } from 'zustand'
import { User } from '@supabase/supabase-js'
 
interface AuthState {
  user: User | null
  loading: boolean
  setUser: (user: User | null) => void
  setLoading: (loading: boolean) => void
}
 
export const useAuthStore = create<AuthState>()((set) => ({
  user: null,
  loading: true,
  setUser: (user) => set({ user }),
  setLoading: (loading) => set({ loading }),
}))
 
// Uso com seletor (previne re-renderizações de mudanças de estado não relacionadas):
// const user = useAuthStore((state) => state.user)
// NÃO: const { user } = useAuthStore()  // inscreve-se em TODAS as mudanças

O que isso demonstra em produção:

Os parênteses duplos create<AuthState>()((set) => ...) não são um erro de digitação. O primeiro () é necessário ao usar genéricos TypeScript com Zustand, e também habilita o encadeamento de middleware (por exemplo, create<AuthState>()(persist(devtools((set) => ...)))).
set({ user }) faz uma mesclagem rasa (shallow merge), não uma substituição. Apenas o campo user é atualizado enquanto loading permanece intocado. Este é o comportamento padrão do Zustand.
Sempre use seletores: useAuthStore((s) => s.user) se inscreve apenas no campo user. Usar const { user } = useAuthStore() sem um seletor se inscreve no store inteiro, causando re-renderizações sempre que qualquer campo muda (incluindo loading).
O store existe fora do React como um singleton de nível de módulo. Ele pode ser acessado em qualquer lugar via useAuthStore.getState(), inclusive em código não-React como utilitários de API ou middleware.
Em SSR do Next.js, este singleton é compartilhado entre todas as requisições no servidor. Para estado específico do usuário, inicialize o store apenas no lado do cliente ou use um padrão de store por requisição.

FAQs

O que a função `create` retorna e como usá-la?

create retorna um hook React (por exemplo, useCounterStore) que se inscreve no store.
Chame-o com um seletor dentro de um componente: useCounterStore((state) => state.count).
O store em si é um objeto JavaScript vanilla gerenciado fora do React.

Por que você passa uma função seletora para o hook do store em vez de desestruturar?

Seletores como (state) => state.count se inscrevem apenas nessa fatia do estado.
O componente só re-renderiza quando o valor selecionado muda.
Desestruturar sem um seletor (const { count } = useStore()) se inscreve no store inteiro, causando re-renderizações a cada mudança.

Como funciona o `set` -- ele substitui ou mescla o estado?

Por padrão, set realiza uma mesclagem rasa (shallow merge) do estado parcial no estado atual.
Para substituir o estado inteiro, passe true como segundo argumento: set({ count: 0 }, true).
Objetos aninhados devem ser espalhados manualmente, pois a mesclagem é apenas de um nível.

Você precisa de um Provider ou wrapper de Context para usar o Zustand?

Não. Stores Zustand são singletons de nível de módulo.
Qualquer componente pode importar e usar o hook do store diretamente.
Providers são necessários apenas em SSR/Next.js para evitar estado compartilhado entre requisições.

Como acessar o estado do Zustand fora de um componente React?

// Lê o estado diretamente
const count = useCounterStore.getState().count;
 
// Inscreve-se em mudanças
const unsub = useCounterStore.subscribe((state) => {
  console.log("Count:", state.count);
});

Qual a diferença entre `set({ count: 0 })` e `set((state) => ({ count: state.count + 1 }))`?

set({ count: 0 }) define um valor estático, independentemente do estado atual.
set((state) => ...) calcula o próximo estado com base no estado atual, o que é necessário para incrementos, toggles e atualizações derivadas.

Armadilha: O que acontece se você selecionar o store inteiro sem um seletor?

Chamar useStore() sem um seletor se inscreve em todas as propriedades do store.
O componente re-renderiza em qualquer mudança de estado, mesmo em campos não relacionados.
Sempre use um seletor para evitar re-renderizações desnecessárias.

Armadilha: Por que `set({ user: { name: "new" } })` não preserva outros campos do usuário?

set faz uma mesclagem rasa apenas no nível superior.
Objetos aninhados são substituídos inteiramente, não mesclados.
Você deve espalhar manualmente: set((s) => ({ user: { ...s.user, name: "new" } })).

Como tipar um store Zustand em TypeScript?

interface CounterState {
  count: number;
  increment: () => void;
}
 
const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

Passe a interface do estado como um genérico para create<State>().
Ações e estado vivem juntos na mesma interface.

Que tipo o `set` aceita em TypeScript?

set aceita Partial<State> ou (state: State) => Partial<State>.
TypeScript garante que você só defina propriedades que existem na interface de estado.

Por que o exemplo de produção usa parênteses duplos `create<AuthState>()((...) => ...)`?

O primeiro () é necessário ao usar genéricos TypeScript com middleware.
Ele também habilita o encadeamento de middleware: create<State>()(persist(devtools((set) => ...))).
Sem middleware, create<State>((set) => ...) (invocação única) é suficiente.

O `set` é síncrono ou assíncrono?

set é síncrono. A atualização do estado ocorre imediatamente.
O React 18+ agrupa re-renderizações, então chamadas sequenciais rápidas de set podem ser agrupadas em uma única renderização.

Links Relacionados

Receita

Instale o Zustand, crie um store com create e consuma-o em qualquer componente sem providers ou wrappers de context.

npm install zustand

// stores/counter-store.ts
import { create } from "zustand";
 
interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}
 
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

"use client";
 
import { useCounterStore } from "@/stores/counter-store";
 
function Counter() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

Exemplo de Trabalho

// stores/todo-store.ts
import { create } from "zustand";
 
interface Todo {
  id: string;
  text: string;
  done: boolean;
}
 
interface TodoState {
  todos: Todo[];
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
  removeTodo: (id: string) => void;
  clearCompleted: () => void;
}
 
export const useTodoStore = create<TodoState>((set) => ({
  todos: [],
 
  addTodo: (text) =>
    set((state) => ({
      todos: [...state.todos, { id: crypto.randomUUID(), text, done: false }],
    })),
 
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
    })),
 
  removeTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((t) => t.id !== id),
    })),
 
  clearCompleted: () =>
    set((state) => ({
      todos: state.todos.filter((t) => !t.done),
    })),
}));

// components/todo-app.tsx
"use client";
 
import { useState } from "react";
import { useTodoStore } from "@/stores/todo-store";
 
export function TodoApp() {
  const [input, setInput] = useState("");
  const todos = useTodoStore((s) => s.todos);
  const addTodo = useTodoStore((s) => s.addTodo);
  const toggleTodo = useTodoStore((s) => s.toggleTodo);
  const removeTodo = useTodoStore((s) => s.removeTodo);
  const clearCompleted = useTodoStore((s) => s.clearCompleted);
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      addTodo(input.trim());
      setInput("");
    }
  };
 
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">Add</button>
      </form>
 
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <label>
              <input
                type="checkbox"
                checked={todo.done}
                onChange={() => toggleTodo(todo.id)}
              />
              <span style={{ textDecoration: todo.done ? "line-through" : "none" }}>
                {todo.text}
              </span>
            </label>
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
 
      <button onClick={clearCompleted}>Clear completed</button>
      <p>{todos.filter((t) => !t.done).length} items remaining</p>
    </div>
  );
}

Mergulho Profundo

Como Funciona

create retorna um hook React que se inscreve no store. O store em si é um objeto JavaScript vanilla gerenciado fora do React.
A função set mescla o estado parcial no estado atual (mesclagem rasa por padrão).
Componentes só re-renderizam quando a fatia do estado que eles selecionam muda. Esta é a principal vantagem de desempenho do Zustand sobre o Context.
Nenhum Provider é necessário. O store é um singleton de nível de módulo que qualquer componente pode importar e usar diretamente.
set pode aceitar um objeto (mesclado) ou uma função (state) => partialState (para atualizações baseadas no estado atual).

Variações

Obtendo o estado completo (não recomendado para desempenho):

const { count, increment } = useCounterStore();
// Re-renderiza em QUALQUER mudança de estado

Usando o store fora do React:

// Acessa o estado diretamente (sem hooks)
const count = useCounterStore.getState().count;
 
// Inscreve-se em mudanças
const unsub = useCounterStore.subscribe((state) => {
  console.log("Count changed:", state.count);
});

Substitui o estado em vez de mesclar:

set({ count: 0 }, true); // Segundo argumento `true` substitui o estado inteiro

Notas de TypeScript

Sempre passe a interface do estado como um genérico para create<State>().
Ações (funções) vivem ao lado do estado na mesma interface.
set é tipado para aceitar Partial<State> ou (state: State) => Partial<State>.

import { create, StoreApi } from "zustand";
 
type Store = StoreApi<CounterState>;

Armadilhas

Selecionar o store inteiro (useStore() sem um seletor) faz com que o componente re-renderize a cada mudança de estado. Sempre use seletores.
set realiza uma mesclagem rasa (shallow merge). Objetos aninhados devem ser espalhados manualmente: set({ user: { ...state.user, name: "new" } }).
O store é um singleton. Em ambientes SSR (Next.js), um único store é compartilhado entre todas as requisições, a menos que você crie instâncias por requisição.
Não desestruture o hook do store no nível do módulo. Chame-o apenas dentro dos componentes.
set é síncrono. A atualização do estado e o re-render ocorrem no mesmo tick (agrupados pelo React 18+).

Alternativas

Abordagem	Prós	Contras
Zustand	Sem providers, API mínima, seletores rápidos	Singleton em SSR, curva de aprendizado para middleware
React Context	Integrado, sem dependências	Re-renderiza todos os consumidores, sem seletores
Redux Toolkit	Ecossistema maduro, DevTools	Boilerplate, configuração complexa
Jotai	Modelo atômico, de baixo para cima	Modelo mental diferente, muitos átomos para gerenciar

Exemplo do Mundo Real

De uma aplicação SaaS de produção Next.js 15 / React 19 (SystemsArchitect.io).

// Exemplo de produção: Store de autenticação
// Arquivo: src/stores/auth.ts
import { create } from 'zustand'
import { User } from '@supabase/supabase-js'
 
interface AuthState {
  user: User | null
  loading: boolean
  setUser: (user: User | null) => void
  setLoading: (loading: boolean) => void
}
 
export const useAuthStore = create<AuthState>()((set) => ({
  user: null,
  loading: true,
  setUser: (user) => set({ user }),
  setLoading: (loading) => set({ loading }),
}))
 
// Uso com seletor (previne re-renderizações de mudanças de estado não relacionadas):
// const user = useAuthStore((state) => state.user)
// NÃO: const { user } = useAuthStore()  // inscreve-se em TODAS as mudanças

O que isso demonstra em produção:

Os parênteses duplos create<AuthState>()((set) => ...) não são um erro de digitação. O primeiro () é necessário ao usar genéricos TypeScript com Zustand, e também habilita o encadeamento de middleware (por exemplo, create<AuthState>()(persist(devtools((set) => ...)))).
set({ user }) faz uma mesclagem rasa (shallow merge), não uma substituição. Apenas o campo user é atualizado enquanto loading permanece intocado. Este é o comportamento padrão do Zustand.
Sempre use seletores: useAuthStore((s) => s.user) se inscreve apenas no campo user. Usar const { user } = useAuthStore() sem um seletor se inscreve no store inteiro, causando re-renderizações sempre que qualquer campo muda (incluindo loading).
O store existe fora do React como um singleton de nível de módulo. Ele pode ser acessado em qualquer lugar via useAuthStore.getState(), inclusive em código não-React como utilitários de API ou middleware.
Em SSR do Next.js, este singleton é compartilhado entre todas as requisições no servidor. Para estado específico do usuário, inicialize o store apenas no lado do cliente ou use um padrão de store por requisição.

FAQs

O que a função `create` retorna e como usá-la?

create retorna um hook React (por exemplo, useCounterStore) que se inscreve no store.
Chame-o com um seletor dentro de um componente: useCounterStore((state) => state.count).
O store em si é um objeto JavaScript vanilla gerenciado fora do React.

Por que você passa uma função seletora para o hook do store em vez de desestruturar?

Seletores como (state) => state.count se inscrevem apenas nessa fatia do estado.
O componente só re-renderiza quando o valor selecionado muda.
Desestruturar sem um seletor (const { count } = useStore()) se inscreve no store inteiro, causando re-renderizações a cada mudança.

Como funciona o `set` -- ele substitui ou mescla o estado?

Por padrão, set realiza uma mesclagem rasa (shallow merge) do estado parcial no estado atual.
Para substituir o estado inteiro, passe true como segundo argumento: set({ count: 0 }, true).
Objetos aninhados devem ser espalhados manualmente, pois a mesclagem é apenas de um nível.

Você precisa de um Provider ou wrapper de Context para usar o Zustand?

Não. Stores Zustand são singletons de nível de módulo.
Qualquer componente pode importar e usar o hook do store diretamente.
Providers são necessários apenas em SSR/Next.js para evitar estado compartilhado entre requisições.

Como acessar o estado do Zustand fora de um componente React?

// Lê o estado diretamente
const count = useCounterStore.getState().count;
 
// Inscreve-se em mudanças
const unsub = useCounterStore.subscribe((state) => {
  console.log("Count:", state.count);
});

Qual a diferença entre `set({ count: 0 })` e `set((state) => ({ count: state.count + 1 }))`?

set({ count: 0 }) define um valor estático, independentemente do estado atual.
set((state) => ...) calcula o próximo estado com base no estado atual, o que é necessário para incrementos, toggles e atualizações derivadas.

Armadilha: O que acontece se você selecionar o store inteiro sem um seletor?

Chamar useStore() sem um seletor se inscreve em todas as propriedades do store.
O componente re-renderiza em qualquer mudança de estado, mesmo em campos não relacionados.
Sempre use um seletor para evitar re-renderizações desnecessárias.

Armadilha: Por que `set({ user: { name: "new" } })` não preserva outros campos do usuário?

set faz uma mesclagem rasa apenas no nível superior.
Objetos aninhados são substituídos inteiramente, não mesclados.
Você deve espalhar manualmente: set((s) => ({ user: { ...s.user, name: "new" } })).

Como tipar um store Zustand em TypeScript?

interface CounterState {
  count: number;
  increment: () => void;
}
 
const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

Passe a interface do estado como um genérico para create<State>().
Ações e estado vivem juntos na mesma interface.

Que tipo o `set` aceita em TypeScript?

set aceita Partial<State> ou (state: State) => Partial<State>.
TypeScript garante que você só defina propriedades que existem na interface de estado.

Por que o exemplo de produção usa parênteses duplos `create<AuthState>()((...) => ...)`?

O primeiro () é necessário ao usar genéricos TypeScript com middleware.
Ele também habilita o encadeamento de middleware: create<State>()(persist(devtools((set) => ...))).
Sem middleware, create<State>((set) => ...) (invocação única) é suficiente.

O `set` é síncrono ou assíncrono?

set é síncrono. A atualização do estado ocorre imediatamente.
O React 18+ agrupa re-renderizações, então chamadas sequenciais rápidas de set podem ser agrupadas em uma única renderização.

Configuração e Uso Básico do Zustand

Buscar na documentação

Configuração e Uso Básico do Zustand