Zustand State

Zustand is the state management library you reach for when Redux feels like overkill. No providers, no boilerplate, just a `create()` function that returns a hook. The skill covers selector patterns to avoid unnecessary rerenders, `useShallow` for grabbing multiple values efficiently, and the non-React API for accessing state outside components. Two security gates matter here: the persist middleware can leak secrets to localStorage if you're not careful with what gets serialized, and devtools should be gated to development unless you have a reason. It's genuinely minimal but handles the full scope from vanilla JS stores to React integration.

skills.sh installs: 258
GitHub stars: 87
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add existential-birds/beagle --skill zustand-state --agent claude-code

Installs into .claude/skills of the current project.

Files

Zustand State Management

Minimal state management - no providers, minimal boilerplate.

Quick Reference

import { create } from 'zustand'

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

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

// In component - select only what you need
const bears = useBearStore((state) => state.bears)
const increase = useBearStore((state) => state.increase)

State Updates

// Flat updates (auto-merged at one level)
set({ bears: 5 })
set((state) => ({ bears: state.bears + 1 }))

// Nested objects (manual spread required)
set((state) => ({
  nested: { ...state.nested, count: state.nested.count + 1 }
}))

// Replace entire state (no merge)
set({ bears: 0 }, true)

Selectors & Performance

// Good - subscribes only to bears
const bears = useBearStore((state) => state.bears)

// Bad - rerenders on any change
const state = useBearStore()

// Multiple values with useShallow (prevents rerenders with shallow comparison)
import { useShallow } from 'zustand/react/shallow'

SKILL.md on GitHub