zustand-patterns

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

// ✅ Create typed store with double-call pattern
const useStore = create<State>()((set,

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.

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