zustand-state-management

Last Updated : 2026-01-21 Latest Version : zustand@5.0.10 (released 2026-01-12) Dependencies : React 18-19, TypeScript 5+ TypeScript Store (CRITICAL: use create ()() double parentheses): Use in Components : Basic Store (JavaScript): TypeScript Store (Recommended): Persistent Store (survives page reloads): ✅ Use create ()() (double parentheses) in TypeScript for middleware compatibility ✅ Define separate interfaces for state and actions ✅ Use selector functions to extract specific state slices ✅ Use set with updater functions for derived state: set((state) => ({ count: state.count + 1 })) ✅ Use unique names for persist middleware storage keys ✅ Handle Next.js hydration with hasHydrated flag pattern ✅ Use useShallow hook for selecting multiple values ✅ Keep actions pure (no side effects except state updates) ❌ Use create (...) (single parentheses) in TypeScript - breaks middleware types ❌ Mutate state directly: set((state) => { state.count++; return state }) - use immutable updates ❌ Create new objects in selectors: useStore((state) => ({ a: state.a })) - causes infinite renders ❌ Use same storage name for multiple stores - causes data collisions ❌ Access localStorage during SSR without hydration check ❌ Use Zustand for server state - use TanStack Query instead ❌ Export store instance directly - always export the hook This skill prevents 6 documented issues: Error : "Text...