What problem does it solve?
Zustand 5 provides a compact, scalable pattern library to organize React state, reducing boilerplate and preventing unnecessary re-renders in complex apps.
Core Features & Use Cases
- Basic Store: Simple, typed stores with predictable updates.
- Persist Middleware: State persistence across sessions.
- Selectors: Fine-grained state selection to minimize re-renders.
- Async Actions: Async data flows with clean error handling.
- Slices Pattern: Modular, composable store slices.
- Immer Middleware: Immutable state mutations with immer.
- DevTools: Debug and inspect Zustand stores within devtools.
- Outside React: Access and subscribe to Zustand state from non-component code.
Quick Start
Example usage in a React project:
import { create } from "zustand";
interface CounterStore { count: number; increment: () => void; }
const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
// Usage in a component
function Counter() {
const { count, increment } = useCounterStore();
return (
<div>
<span>{count}</span>
<button onClick={increment}>Increment</button>
</div>
);
}
