Zustand

Install Zustand, create a store with create, and consume it in any component without providers or context wrappers.

Design stores with colocated actions, derived (computed) values, and a clear separation between state and behavior. Keep stores focused on a single domain.

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

Define async functions as store actions. Use set to manage loading and error states alongside the async operation. No special middleware is needed.

Split large stores into focused slices, then combine them into a single store. Each slice defines its own state and actions independently.

Zustand ships with several built-in middleware: persist for storage, devtools for Redux DevTools, immer for immutable updates, and subscribeWithSelector for gra

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

Type Zustand stores by passing an interface to create<State>(). Use StateCreator for slices and middleware typing. Zustand's TypeScript support provides full in

Decide when to use React Context and when to use Zustand. Context works for low-frequency, theme-like state. Zustand excels for high-frequency, multi-consumer s

In Next.js App Router, Zustand stores are singletons that persist across requests on the server. Create per-request store instances using createStore + Context

Test Zustand stores by resetting state between tests, using getState() and setState() for direct assertions, and mocking stores in component tests.

Wrap your store with the devtools middleware to connect to the Redux DevTools browser extension. Inspect state, track actions, and use time-travel debugging.