Zustand

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

Projete stores com ações colocalizadas, valores derivados (computados) e uma clara separação entre estado e comportamento. Mantenha stores focados em um único domínio.

Use selector functions with useStore(selector) to subscribe to specific slices of state. Components only re-render when their selected value changes, preventing

Defina funções assíncronas como ações de store. Use `set` para gerenciar estados de carregamento e erro junto com a operação assíncrona. Nenhuma middleware especial é necessária.

Divida stores grandes em slices focados e, em seguida, combine-os em um único store. Cada slice define seu próprio estado e ações de forma independente.

Zustand oferece vários middlewares integrados: persist para armazenamento, devtools para Redux DevTools, immer para atualizações imutáveis e subscribeWithSelector para assinaturas granulares.

Use the persist middleware to automatically save and restore store state to localStorage, sessionStorage, or any custom storage engine.

Use the immer middleware to write mutable-style state updates that produce immutable state under the hood. This eliminates manual object spreading for nested up

Tipa stores Zustand passando uma interface para create<State>(). Use StateCreator para slices e tipagem de middleware. O suporte TypeScript do Zustand fornece inferência completa

Decida quando usar React Context e quando usar Zustand. Context funciona para estado de baixa frequência, semelhante a temas. Zustand se destaca para estado de alta frequência e com múltiplos consumidores

No Next.js App Router, os stores do Zustand são singletons que persistem entre requisições no servidor. Crie instâncias de store por requisição usando createStore + Context

Teste stores do Zustand resetando o estado entre testes, usando getState() e setState() para asserções diretas e mockando stores em testes de componentes.

Envolva seu store com o middleware devtools para conectar à extensão do navegador Redux DevTools. Inspecione o estado, rastreie ações e use o depurador time-travel.

A single-page roundup of every highlight bullet from the 13 pages in the Zustand section, grouped by source page so you can scan all 78 takeaways without opening each article individually.