# 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 the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## 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: How does it compare to Redux?**
A: Zustand has no reducers, no providers, and no action types. Code volume drops by 70%+. But Redux has a larger ecosystem (RTK Query, etc.).

**Q: Does it support SSR?**
A: Yes. For Next.js, creating a new store per request is recommended to avoid cross-request pollution.

**Q: How should I organize a large store?**
A: Use the slices pattern: split the store into multiple `createSlice` functions by feature, then merge them in `create()`.

## Sources & Credits

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

---
Source: https://tokrepo.com/en/workflows/zustand-bear-sized-state-management-react-2f0e010c
Author: AI Open Source