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]