zustand-patterns
Reference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, and devtools integration. Documents 7 core patterns with TypeScript examples and anti-patterns. Use when building React state management with Zustand instead of Redux.
By yonatangross · 1,219 installs
npx skills add yonatangross/orchestkit --skill zustand-patterns
Source repository · Upstream listing
Zustand Patterns
Modern state management with Zustand 5.x lightweight, TypeScript first, no boilerplate.
Overview
Global state without Redux complexity
Shared state across components without prop drilling
Persisted state with localStorage/sessionStorage
Computed/derived state with selectors
State that needs middleware (logging, devtools, persistence)
Upstream coverage (do not restate)
Zustand's own docs are the source for the mechanics. This skill carries only the OrchestKit delta
on top of them, in references/ork delta.md , the rules/ files, and the checklist.
Topic First party source
Basic store, create<State ()() , actions, async actions https://github.com/pmndrs/zustand/blob/main/docs/reference/apis/create.md
Slices pattern (splitting and combining stores) https://github.com/pmndrs/zustand/blob/main/docs/learn/guides/slices pattern.md
Typing slices and middleware mutator tuples https://github.com/pmndrs/zustand/blob/main/docs/learn/guides/advanced typescript.md
Immer middleware (draft mutations) https://github.com/pmndrs/zustand/blob/main/docs/reference/middlewares/immer.md
persist: partialize , version , migrate , onRehydrateStorage , storage adapters https://github.com/pmndrs/zustand/blob/main/docs/reference/middlewares/persist.md
devtools: action names, enabled , serialize , trace https://github.com/pmndrs/zustand/blob/main/docs/reference/middlewares/devtools.md
subscribeWithSelector and non React subscriptions https://github.com/pmndrs/zustand/blob/main/docs/reference/middlewares/subscribe with selector.md
Selectors and useShallow re render control https://github.com/pmndrs/zustand/blob/main/docs/learn/guides/prevent rerenders with use shallow.md
v4 to v5 migration ( createWithEqualityFn , React 18 floor) https://github.com/pmndrs/zustand/blob/main/docs/reference/migrations/migrating to v5.md
SSR and hydration https://github.com/pmndrs/zustand/blob/main/docs/learn/guides/ssr and hydration.md
Store testing and reset https://github.com/pmndrs/zustand/blob/main/docs/learn/guides/testing.md
Server state ownership (use TanStack Query, not Zustand) https://tanstack.com/query/latest/docs/framework/react/guides/does this replace client state
Quick Reference
Key Decisions
Decision Option A Option B Recommendation
State structure Single store Multiple stores Slices in single store easier cross slice access
Nested updates Spread operator Immer middleware Immer for deeply nested state (3+ levels)
Persistence Manual localStorage persist middleware persist middleware with partialize
Multiple values Multiple selectors useShallow useShallow for 2 5 related values
Server state Zustand TanStack Query TanStack Query Zustand for client only state
DevTools Always on Conditional Conditional enabled: process.env.NODE ENV === 'development'
Anti Patterns & Integration
Forbidden patterns (store destructuring, derived state, server state, direct mutation) and React Query integration guidance.
Load Read("references/anti patterns and integration.md") for anti pattern examples and TanStack Query separation patterns.
Related Skills
react server components framework RSC hydration considerations with Zustand
Server state: https://tanstack.com/query/latest/docs/framework/react/guides/does this replace client state
Form state: https://react hook form.com/docs/useform
Capability Details
store creation
Keywords : zustand, create, store, typescript, state
Solves : Setting up type safe Zustand stores with proper TypeScript inference
slices pattern
Keywords : slices, modular, split, combine, StateCreator
Solves : Organizing large stores into maintainable, domain specific slices
middleware stack
Keywords : immer, persist, devtools, middleware, compose
Solves : Combining middleware in correct order for immutability, persistence, and debugging
selector optimization
Keywords : selector, useShallow, re render, performance, memoization
Solves : Preventing unnecessary re renders with proper selector patterns
persistence migration
Keywords : persist, localStorage, sessionStorage, migrate, version
Solves : Persisting state with schema migrations between versions
References
Load on demand with Read("references/<file ") :
File Content
ork delta.md OrchestKit specific rules: the corrected zustand/shallow label, the v5 floor, secret handling, graded slice typing
anti patterns and integration.md Forbidden patterns and React Query integration
Other resources:
Load: Read("scripts/store template.ts") Production ready store template
Load: Read("checklists/zustand checklist.md") Implementation checklist