zustand-patternslisted

# Zustand Patterns — Global State Management ## Overview Zustand patterns for client state: - Curried syntax with TypeScript - Store slices organization - Middleware (devtools, persist, immer) - Granular selectors - Feature-scoped vs global stores - When to use Zustand vs TanStack Query vs Context --- ## Hard Rules <HARD-RULES> These rules are NON-NEGOTIABLE. Violating any of them is a bug. - ALWAYS use curried syntax in TypeScript: `create<State>()((...) => ({...}))` - NEVER destructure entire store — ALWAYS use granular selectors - ALWAYS use `useShallow` when selecting multiple values - ALWAYS define state + actions in one interface - NEVER mutate state directly unless using immer middleware - ALWAYS use `devtools` middleware in development - ALWAYS use `partialize` with `persist` — NEVER persist entire store - NEVER store server/API data in Zustand — use TanStack Query for server state - ALWAYS reset stores between tests via `useStore.setState(useStore.getInitialState())` - NEVER use Zustand for form state — use React Hook Form </HARD-RULES> --- ## State Management Decision Matrix | Concern | Tool | Why | |---------|------|-----| | Server/API data | TanStack Query | Caching, deduplication, background refresh | | Global client state | Zustand | Lightweight, no boilerplate, fast | | Local component state | `useState` / `useReducer` | Simplest option, no external deps | | Rarely-changing tree-wide values | React Context | Theme, locale, auth user | | Form state | R