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) Core Patterns Covers basic stores, slices, Immer, persist, selectors, async actions, and devtools. Load Read("${CLAUDE_SKILL_DIR}/references/core-patterns.md") for full code examples of all 7 core patterns. Quick Reference // ✅ Create typed store with double-call pattern const useStore = create < State
( ) ( ( set , get ) => ( { ... } ) ) ; // ✅ Use selectors for all state access const count = useStore ( ( s ) => s . count ) ; // ✅ Use useShallow for multiple values (Zustand 5.x) const { a , b } = useStore ( useShallow ( ( s ) => ( { a : s . a , b : s . b } ) ) ) ; // ✅ Middleware order: immer → subscribeWithSelector → devtools → persist create ( persist ( devtools ( immer ( ( set ) => ( { ... } ) ) ) ) ) // ❌ Never destructure entire store const store = useStore ( ) ; // Re-renders on ANY change // ❌ Never store server state (use TanStack Query instead) const useStore = create ( ( set ) => ( { users : [ ] , fetchUsers : async ( ) => ... } ) ) ; 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("${CLAUDE_SKILL_DIR}/references/anti-patterns-and-integration.md") for anti-pattern examples and TanStack Query separation patterns.