ConfigsApr 11, 2026·1 min read

Zustand — Bear-Sized State Management for React

Zustand is a small, fast, and scalable bearbones state-management solution for React. A cozy alternative to Redux with a simple hooks API, no providers needed, and first-class TypeScript support.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i zustand
import { create } from "zustand";

type BearStore = {
  bears: number;
  increase: () => void;
  reset: () => void;
};

export const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  increase: () => set((s) => ({ bears: s.bears + 1 })),
  reset: () => set({ bears: 0 }),
}));

// In component
function Counter() {
  const bears = useBearStore((s) => s.bears);
  const increase = useBearStore((s) => s.increase);
  return <button onClick={increase}>{bears} bears</button>;
}
Intro

Zustand is a small, fast state management solution for React — made by the poimandres collective (same team as React Three Fiber, Jotai, Valtio). No boilerplate, no context provider, no reducers. Just hooks.

What Zustand Does

  • Global state — one store, many slices
  • Selectors — subscribe to specific slices (avoids unnecessary renders)
  • Middleware — persist, devtools, immer, subscribeWithSelector
  • Vanilla support — usable outside React
  • Transient updates — subscribe without rerendering
  • Async actions — plain async functions in the store

Architecture

A store is a function returning state + actions. create() returns a React hook bound to that store. Selectors (useStore(s => s.slice)) prevent re-renders when unrelated state changes. No reducers, no dispatch.

Self-Hosting

Client library only. No server needed.

Key Features

  • ~1KB gzipped
  • No providers (works outside React tree)
  • TypeScript-first
  • Middleware: persist (localStorage), devtools (Redux DevTools), immer
  • SSR-safe
  • Transient subscriptions (subscribe API)
  • Slices pattern for large stores

Comparison

Library Size Boilerplate DevTools Providers
Zustand ~1KB Minimal Yes No
Redux Toolkit ~13KB Medium Yes Yes
Jotai ~3KB Atomic Yes Yes
Valtio ~3KB Mutable proxy Yes No
React Context 0 High No Yes

常见问题 FAQ

Q: 和 Redux 比？ A: Zustand 无 reducer、无 provider、无 action types。代码量减少 70%+。但 Redux 生态更大（RTK Query 等）。

Q: 支持 SSR 吗？ A: 支持。Next.js 推荐每个请求创建新 store 避免跨请求污染。

Q: 怎么组织大型 store？ A: 用 slices 模式：把 store 按功能拆多个 createSlice 函数，create() 时合并。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

esbuild — Extremely Fast JavaScript Bundler

esbuild is an extremely fast JavaScript/TypeScript bundler written in Go. 10-100x faster than webpack/Rollup. Powers Vite, Bun, and many modern build tools as their underlying transform engine.

AI Open Source

Redux — Predictable Global State Management for JS Apps

Redux is the original predictable state container for JavaScript apps. Modern Redux uses Redux Toolkit (RTK) which reduces boilerplate 80% and includes RTK Query for server state. Still the standard for large-scale React apps.

AI Open Source

UnoCSS — Instant On-Demand Atomic CSS Engine

UnoCSS is the instant on-demand atomic CSS engine. Inspired by Tailwind/Windi but engine-first: define your own utilities, presets, and rules. 5x faster than Tailwind JIT with no parsing or AST overhead.

AI Open Source
◈Home🔍Search👤Me