Documentation
Getting Started
Installation
Install Zustand using npm or yarn:
npm install zustand # or yarn add zustand # or pnpm add zustandYour First Store
Creating a store is straightforward. Here's a simple counter example:
import { create } from 'zustand'
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}))Basic Usage
Use the store in your React components:
function Counter() {
const count = useStore((state) => state.count)
const increment = useStore((state) => state.increment)
const decrement = useStore((state) => state.decrement)
const reset = useStore((state) => state.reset)
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<button onClick={reset}>Reset</button>
</div>
)
}Core Concepts
Store
A store holds your application state. It's created using the `create` function and returns a React hook.
State
The state is the data that your store holds. It can be any JavaScript value - objects, arrays, primitives, etc.
Actions
Actions are functions that modify the state. They use the `set` function to update the store.
Selectors
Selectors allow you to subscribe to specific parts of the state, optimizing re-renders.