# 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.

## Install

Save in your project root:

## Quick Use

```bash
npm i zustand
```

```ts
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.

- **Repo**: https://github.com/pmndrs/zustand
- **Stars**: 57K+
- **Size**: ~1KB gzipped
- **License**: MIT

## 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

- Docs: https://zustand-demo.pmnd.rs
- GitHub: https://github.com/pmndrs/zustand
- License: MIT

---
Source: https://tokrepo.com/en/workflows/2f0e010c-3567-11f1-9bc6-00163e2b0d79
Author: AI Open Source