zustand
Minimal, unopinionated state management library for React with simple hook-based API, no providers, and minimal boilerplate for global state without Redux complexity.
By bobmatnyc · 437 installs
npx skills add bobmatnyc/claude-mpm-skills --skill zustand
Source repository · Upstream listing
Zustand State Management
Summary
Zustand is a minimal, unopinionated state management library for React. No providers, no boilerplate—just a simple hook based API that feels natural in React applications.
When to Use
React apps needing global state without Redux complexity
Projects wanting minimal boilerplate and bundle size
Teams preferring direct state mutations over reducers
SSR applications (Next.js) requiring flexible state hydration
Migrating from Redux/Context API to simpler solution
Quick Start
Complete Zustand Guide
Core Concepts
Store Creation
State Access Patterns
Mutations
React Integration
useStore Hook
Shallow Comparison
Outside React Components
TypeScript Patterns
Typed Store Creation
Store Type Inference
Combining Multiple Stores
Slices Pattern
Creating Slices
Cross Slice Communication
Middleware
Persist Middleware
DevTools Middleware
Immer Middleware
Combining Middleware
Async Actions & API Integration
Basic Async Actions
Optimistic Updates
Request Deduplication
Computed Values (Selectors)
Basic Selectors
Derived State in Store
Parameterized Selectors
Performance Optimization
Subscription Patterns
Transient Updates
Batching Updates
Testing Strategies
Mock Stores
Test Utilities
Reset Store Between Tests
Migration Guides
From Redux
From Context API
Next.js Integration
App Router (RSC)
Server Actions Integration
SSR Hydration
Best Practices
Store Organization
Action Naming
Selector Optimization
Error Handling
Common Patterns
Loading States
Undo/Redo
Comparison with Alternatives
vs Redux
Zustand Advantages:
No boilerplate (no actions, reducers, dispatch)
No provider needed
Smaller bundle size (~1kb vs ~20kb)
Simpler async handling
TypeScript inference works out of the box
Redux Advantages:
Time travel debugging
Larger ecosystem and middleware
Strict unidirectional data flow
Better for very large applications
vs Context API
Zustand Advantages:
No provider hell
Better performance (no re render entire subtree)
Simpler API
Built in middleware
Context Advantages:
Built into React (no dependency)
Better for component local state
Explicit component boundaries
vs Jotai
Zustand Advantages:
More traditional store based approach
Better for complex state logic
Easier migration from Redux
Jotai Advantages:
Atomic state management
Better code splitting
More React like (atom based)
Suspense support out of the box
Resources
[Official Documentation](https://docs.pmnd.rs/zustand)
[GitHub Repository](https://github.com/pmndrs/zustand)
[TypeScript Guide](https://docs.pmnd.rs/zustand/guides/typescript)
[Middleware Reference](https://docs.pmnd.rs/zustand/integrations/persisting store data)
Related Skills
When using Zustand, these skills enhance your workflow:
react : React integration patterns and hooks for Zustand stores
tanstack query : Server state management (use with Zustand for client state)
nextjs : Zustand with Next.js App Router and Client Components
test driven development : Testing Zustand stores, actions, and selectors
[Full documentation available in these skills if deployed in your bundle]