Features
- Minimal API — create a store in 3 lines
- No providers or context wrappers needed
- Middleware system (persist, devtools, immer)
- Selective re-rendering with selector functions
- Works outside React (vanilla stores)
Pros
- Simplest API of any state management library
- No boilerplate — just functions and objects
- Tiny bundle size (~1kb gzipped)
- Scales from simple to complex state
Cons
- Less structured than Redux for very large apps
- No built-in async data fetching (use TanStack Query)
- DevTools integration less powerful than Redux
Overview
Zustand is a small, fast state management library for React that uses a simplified flux pattern. Created by the pmndrs collective (the same team behind Jotai and Valtio), Zustand provides a minimal API that lets you create stores with plain JavaScript functions — no reducers, actions, or dispatchers needed.
Zustand stores are created outside components and accessed via hooks with optional selectors for fine-grained re-rendering control. The library requires no providers or context wrappers, making it easy to use and test. Middleware support adds persistence, devtools, and Immer integration when needed.
When to Use
Zustand is the right choice for most React applications that need client-side state management. Its simplicity makes it ideal for small to medium projects, but its middleware system and selector-based re-rendering make it capable enough for large applications. Pair it with TanStack Query for server state.
Getting Started
npm install zustandimport { create } from "zustand";
type CounterStore = { count: number; increment: () => void };
const useCounter = create<CounterStore>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function Counter() {
const { count, increment } = useCounter();
return <button onClick={increment}>Count: {count}</button>;
}