zustand

Original：🇺🇸 English

Translated

Implement global state management for React/TypeScript applications. Use when creating, modifying, or debugging Zustand stores, implementing state management patterns (slices, persist, devtools, immer), setting up Zustand with Next.js/SSR, writing tests for Zustand stores, or working with TypeScript typing for Zustand (curried create, StateCreator, middleware mutators).

3installs

Sourcefellipeutaka/leon

Added on2026-07-27

NPX Install

npx skill4agent add fellipeutaka/leon zustand

SKILL.md Content

View Translation Comparison →

Zustand

Lightweight state management for React. No providers, no boilerplate. Stores are hooks.

Quick start

ts

import { create } from "zustand"

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

// In components — select only what you need
const bears = useBearStore((state) => state.bears)

Critical rules

TypeScript: Use curried form
```
create<T>()(...)
```
— required for type inference
Immutability: Treat state as immutable.
```
set
```
shallow-merges at one level only
Selectors: Always select specific fields, not the whole store. Use
```
useShallow
```
for multi-field selectors returning new references
Middleware order:
```
devtools
```
must be outermost:
```
devtools(persist(immer(...)))
```
Next.js: Create stores per-request via
```
createStore
```
+ Context, NOT global
```
create
```
Nested updates: Use Immer for deep nesting, spread operator for shallow

When to use what

Need	Solution
Basic React store	`create<T>()(...)`
Vanilla (non-React) store	`createStore` from `zustand/vanilla`
Use vanilla store in React	`useStore(store, selector)`
Auto-infer types (no interface)	`combine` middleware
Persist to localStorage	`persist` middleware
Redux DevTools	`devtools` middleware
Mutable-style updates	`immer` middleware
Subscribe to slices externally	`subscribeWithSelector` middleware
Multiple fields without rerender	`useShallow` wrapper
Large store modularization	Slices pattern with `StateCreator`
Next.js App Router	`createStore` + Context + Provider
Reset store	`set(initialState)` or `store.getInitialState()`

References

API reference (create, createStore, hooks, shallow): See references/apis.md
TypeScript patterns (curried create, slices, middleware typing, custom middleware): See references/typescript.md
Middlewares (persist, devtools, immer, redux, combine, subscribeWithSelector): See references/middlewares.md
Patterns & best practices (Next.js, testing, reset, auto-selectors, SSR, deep updates): See references/patterns.md