zustand
Zustand provides lightweight state management for React using hooks instead of providers or complex patterns. It's designed for apps needing global state without Redux overhead, offering direct mutations and flexible hydration for server-side rendering.
Zustand manages global React state through a simple hook-based API without providers or boilerplate.
AI-generated summary based on this skill's SKILL.md
Install
bobmatnyc/claude-mpm-skills/zustand · repository language: Python
git clone https://github.com/bobmatnyc/claude-mpm-skills
cp -r claude-mpm-skills/toolchains/typescript/state/zustand ~/.claude/skills/zustandnpx skillfed install bobmatnyc/claude-mpm-skills/zustandFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you use zustand hooks for state management in React?
Zustand uses a hook-based API to manage global state without providers. Create a store with `create()`, define your state and actions, then use the hook in components. Zustand automatically tracks which parts of state each component uses, re-rendering only when those specific values change. This makes it simpler than Context API while avoiding Redux boilerplate.
What makes zustand different from Redux or Context API?
Zustand state management eliminates the need for providers, reducers, and action creators. Unlike Redux, zustand uses direct mutations and a simpler API; unlike Context API, it avoids prop drilling and provider nesting. Zustand's hook-based approach with fine-grained selectors means components only re-render when their subscribed state actually changes, improving performance.
Can zustand persist state and integrate with devtools?
Zustand supports middleware for persistence and debugging. The `persist` middleware automatically saves state to localStorage and rehydrates on app load. The `devtools` middleware integrates with Redux DevTools for time-travel debugging, action history, and state inspection. Both can be chained together in store creation for a complete development experience.
How do you build type-safe stores with zustand and TypeScript?
Zustand provides full TypeScript support through generic types. Define your state interface, pass it to `create<YourState>()`, and get automatic type inference for actions and selectors. This ensures compile-time safety for all state mutations and subscriptions. Combined with zustand's hook API, TypeScript integration makes refactoring and catching errors straightforward.
What is zustand's selector optimization for React re-renders?
Zustand uses selectors to subscribe components to specific state slices, preventing unnecessary re-renders. Instead of using the entire store in a component, pass a selector function that extracts only the needed values. Zustand compares selected values using shallow equality by default, so components only update when their selected state actually changes.
How does zustand handle server-side rendering and hydration?
Zustand supports SSR through its `persist` middleware and manual hydration patterns. On the server, create store snapshots; on the client, hydrate the store with server state before rendering. Zustand's flexibility allows you to control when hydration happens, preventing hydration mismatches and ensuring consistent state between server and client in Next.js and similar frameworks.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
npm install zustand
```typescript // stores/useCounterStore.ts import { create } from 'zustand'
interface CounterState { count: number increment: () => void decrement: () => void }
export const useCounterStore =
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
toolchains/typescript/state/zustand/SKILL.md
toolchains/typescript/state/zustand/metadata.json