mcpField
Z
zustand

zustand

github.com/marcioaltoeDevelopment060 installsUpdated 1d ago
Repository

About zustand

zustand is a lightweight state-management skill for React developers. It explains store creation, TypeScript patterns, middleware, and practices for Next.js and other common use cases.

Key features

  1. 01Hook-based stores without providers
  2. 02TypeScript store creation patterns
  3. 03Selectors and shallow comparison
  4. 04Middleware for persistence and updates
  5. 05Slices for modularizing large stores

Use cases

  1. 01Building a basic React store
  2. 02Persisting state to localStorage
  3. 03Using a vanilla store with React
  4. 04Structuring stores in Next.js

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/marcioaltoe/skills --skill zustand

After installing, type/zustandin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
apis.md
middlewares.md
patterns.md
typescript.md

Details

From the project README

Zustand

Lightweight state management for React. No providers, no boilerplate. Stores are hooks.

Quick start

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 components — select only what you need
const bears = useBearStore((state) => state.bears)

Critical rules

  1. TypeScript: Use curried form create<T>()(...) — required for type inference
  2. Immutability: Treat state as immutable. set shallow-merges at one level only
  3. Selectors: Always select specific fields, not the whole store. Use useShallow for multi-field selectors returning new references
  4. Middleware order: devtools must be outermost: devtools(persist(immer(...)))
  5. Next.js: Create stores per-request via createStore + Context, NOT global create
  6. Nested updates: Use Immer for deep nesting, spread operator for shallow

When to use what

NeedSolution
Basic React storecreate<T>()(...)
Vanilla (non-React) storecreateStore from zustand/vanilla
Use vanilla store in ReactuseStore(store, selector)
Auto-infer types (no interface)combine middleware
Persist to localStoragepersist middleware
Redux DevToolsdevtools middleware
Mutable-style updatesimmer middleware
Subscribe to slices externallysubscribeWithSelector middleware
Multiple fields without rerenderuseShallow wrapper
Large store modularizationSlices pattern with StateCreator
Next.js App RoutercreateStore + Context + Provider
Reset storeset(initialState) or store.getInitialState()

References

Comments

Markdown supported