Zustand State Management

Status: Production Ready ✅ Last Updated: 2025-10-24 Production Tested: Used across 2025 React ecosystem, React 19 compatible

---

Auto-Trigger Keywords

Claude Code automatically discovers this skill when you mention:

Primary Keywords

• zustand
• zustand state management
• state management React
• create store
• useBoundStore
• zustand v5
• StateCreator

Secondary Keywords

• global state React
• React state management
• persist middleware
• devtools middleware
• slices pattern
• zustand TypeScript
• zustand hooks
• useState alternative
• Redux alternative
• Context API alternative
• localStorage state
• sessionStorage state
• shallow equality
• selector pattern
• zustand immer

Error-Based Keywords

• "hydration error" zustand
• "text content mismatch" zustand
• "TypeScript inference" zustand
• "infinite render" zustand
• "StateCreator" types
• "create<T>()" syntax
• "createJSONStorage not exported"
• "persist middleware error"
• "Next.js hydration" zustand

---

What This Skill Does

Provides production-tested patterns for Zustand state management in React with TypeScript. Covers basic setup, middleware configuration (persist, devtools), slices pattern for modular stores, Next.js SSR handling, and advanced TypeScript patterns.

Core Capabilities

✅ TypeScript Setup - Correct create<T>()() syntax with full type inference ✅ Persist Middleware - localStorage/sessionStorage with hydration handling ✅ Slices Pattern - Modular store organization for large apps ✅ Next.js Integration - SSR-safe stores with hydration checks ✅ Devtools - Redux DevTools integration for debugging ✅ Common Patterns - Async actions, computed values, selectors, resets ✅ Error Prevention - Prevents 5 documented issues with production-tested solutions ✅ 8 Templates - Ready-to-use store patterns for every use case

---

Known Issues This Skill Prevents

---

When to Use This Skill

✅ Use When:

• Setting up global state in React applications
• Migrating from Redux or Context API to simpler solution
• Need state persistence (localStorage/sessionStorage)
• Building type-safe stores with TypeScript
• Working with Next.js and need SSR-safe state
• Want devtools integration for debugging
• Building large apps needing modular store architecture (slices)
• Encountering hydration errors or TypeScript issues

❌ Don't Use When:

• Managing server state (use TanStack Query instead)
• Need time-travel debugging (use Redux)
• Working with non-React frameworks (check Zustand vanilla store)
• Only need local component state (use useState)

---

Quick Usage Example

# Install Zustand
npm install zustand

# Create store
cat > src/store.ts << 'EOF'
import { create } from 'zustand'

interface BearStore {
  bears: number
  increase: () => void
}

export const useBearStore = create<BearStore>()((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}))
EOF

# Use in component
cat > src/App.tsx << 'EOF'
import { useBearStore } from './store'

function App() {
  const bears = useBearStore((state) => state.bears)
  const increase = useBearStore((state) => state.increase)

  return (
    <div>
      <h1>{bears} bears</h1>
      <button onClick={increase}>Add bear</button>
    </div>
  )
}
EOF

Result: Type-safe, minimal global state with zero boilerplate

Full instructions: See SKILL.md

---

Token Efficiency Metrics

Measured by: Setting up TypeScript store with persist middleware and Next.js hydration handling

---

Package Versions (Verified 2025-10-24)

---

Dependencies

Prerequisites: None (standalone skill)

Integrates With:

• tanstack-query (server state management - use together)
• react-hook-form (form state with Zustand as global state)
• tailwind-v4-shadcn (UI components with Zustand state)

---

File Structure

zustand-state-management/
├── SKILL.md              # Complete documentation
├── README.md             # This file
├── scripts/              # Version checking
│   └── check-versions.sh
├── references/           # Deep-dive docs
│   ├── middleware-guide.md
│   ├── typescript-patterns.md
│   ├── nextjs-hydration.md
│   └── migration-guide.md
└── templates/            # 8 ready-to-use stores
    ├── basic-store.ts
    ├── typescript-store.ts
    ├── persist-store.ts
    ├── slices-pattern.ts
    ├── devtools-store.ts
    ├── nextjs-store.ts
    ├── computed-store.ts
    └── async-actions-store.ts

---

Official Documentation

• Zustand: https://zustand.docs.pmnd.rs/
• GitHub: https://github.com/pmndrs/zustand
• TypeScript Guide: https://zustand.docs.pmnd.rs/guides/typescript
• Context7 Library: /pmndrs/zustand

---

Related Skills

• tanstack-query - Server state management (planned)
• react-hook-form-zod - Forms with validation (planned)
• tailwind-v4-shadcn - UI components

---

Contributing

Found an issue or have a suggestion?

• Open an issue: https://github.com/jezweb/claude-skills/issues
• See SKILL.md for detailed documentation

---

License

MIT License - See main repo LICENSE file

---

Production Tested: React 19 compatible, used across 2025 React ecosystem Token Savings: ~65% Error Prevention: 100% (all 5 known issues prevented) Ready to use! See SKILL.md for complete setup.