Zustand para estado leve no React
Crie um armazenamento Zustand com create(), leia o estado com o hook, atualize-o com ações e aproveite uma API mínima sem código repetitivo.
Zustand para estado leve no React é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é Zustand?
Zustand é uma biblioteca mínima e rápida de gerenciamento de estado para React. Toda a sua API é pequena: crie um store e use um gancho para lê-lo e atualizá-lo. Não há redutores, ações nem código repetitivo.
Criando um store
create() define o store com estado e ações como um objeto simples. O valor retornado é um gancho.
import { create } from 'zustand';
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));Lendo o estado do store
Chame o gancho com uma função seletora para se inscrever em fatias específicas do estado. O componente só é renderizado novamente quando a fatia selecionada muda.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Lendo ações
Selecione ações da mesma forma. As ações não mudam, portanto selecioná-las não causa renderizações adicionais.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}Atualizando o estado com set()
A função set() combina atualizações superficialmente (como setState nos componentes de classe do React). Passe uma função para atualizações que dependam do estado anterior.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Ações assíncronas
As ações no Zustand podem ser assíncronas — basta chamar set() depois de aguardar a operação assíncrona.
export const useUsersStore = create<UsersStore>((set) => ({
users: [],
loading: false,
fetchUsers: async () => {
set({ loading: true });
const users = await fetch('/api/users').then(r => r.json());
set({ users, loading: false });
}
}));Fatias — Compondo stores grandes
Divida um store grande em fatias (objetos separados) e combine-as. O padrão do Zustand não exige a abstração de fatias, mas ela é uma forma organizada de estruturar stores grandes.
Middleware: persistência
O middleware persist salva o estado do Zustand no localStorage e o restaura ao carregar — com configuração mínima.
import { persist } from 'zustand/middleware';
export const useSettingsStore = create<Settings>(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme })
}),
{ name: 'app-settings' } // localStorage key
)
);Middleware: ferramentas de desenvolvimento
Adicione suporte ao Redux DevTools no Zustand com o middleware devtools. Você obtém registro completo de ações e viagem no tempo.
Zustand versus Redux Toolkit
Zustand: mínimo, sem código repetitivo, rápido de configurar e ótimo para apps pequenos e médios. RTK: estruturado, escalável, com DevTools de primeira linha e mais adequado para equipes grandes. Ambos são escolhas sólidas — a simplicidade do Zustand vence na maioria dos apps.
Seletores e desempenho
Sempre selecione a menor fatia do estado de que seu componente precisa. Selecionar o objeto de estado inteiro causa novas renderizações a cada alteração no store. Use shallow de zustand/shallow para seleções com várias propriedades.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Verificação rápida
Como você cria um store Zustand que todo um app React pode usar?
Recapitulação: Zustand
create() define o estado e as ações. O valor retornado é um gancho. Selecione fatias para evitar novas renderizações desnecessárias. set() combina atualizações de estado. Ações assíncronas chamam set() depois de await. Use o middleware persist para localStorage. Use devtools para a integração com Redux DevTools. Nenhum Provider é necessário.
Perguntas Frequentes
A aula “Zustand para estado leve no React” é grátis?
Sim — o texto completo de “Zustand para estado leve no React” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Zustand para estado leve no React”?
Crie um armazenamento Zustand com create(), leia o estado com o hook, atualize-o com ações e aproveite uma API mínima sem código repetitivo. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Zustand para estado leve no React”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Redux Toolkit: createSlice e configureStore
- Zustand para estado leve no React
- Pinia para Vue: defineStore e storeToRefs
- Quando usar estado global ou local