zustand-patterns

Master Zustand 5.x state management with practical patterns for React applications. This reference covers store creation, middleware composition, selector optimization, and persistence strategies—all with TypeScript examples and clear anti-patterns to avoid.

Zustand Patterns teaches you how to build scalable React state management with Zustand 5.x using proven patterns and best practices.

AI-generated summary based on this skill's SKILL.md

★ 208 ⁮ 20 MIT updated 2026-07-28 by yonatangross

Install

yonatangross/orchestkit/zustand-patterns · repository language: TypeScript

Manual (git clone) CLI (skillfed)

git clone https://github.com/yonatangross/orchestkit
cp -r orchestkit/src/skills/zustand-patterns ~/.claude/skills/zustand-patterns

npx skillfed install yonatangross/orchestkit/zustand-patterns

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

What is zustand-patterns and how does it help with React state management?

zustand-patterns is an MIT-licensed reference for mastering Zustand 5.x state management in React applications. It covers store creation, middleware composition, selector optimization, and persistence strategies with TypeScript examples. The guide emphasizes practical patterns and anti-patterns to help you build scalable, type-safe state solutions as a lighter alternative to Redux.

How do you set up a type-safe Zustand store with proper middleware and selectors?

zustand-patterns teaches setting up type-safe stores by defining clear store interfaces, using TypeScript inference for automatic type safety, and composing middleware in the correct order. Key practices include wrapping your store creator with middleware like Immer for immutable updates, persist for localStorage integration, and devtools for debugging. Selectors should be memoized to prevent unnecessary re-renders when accessing store values.

What are zustand slices pattern and modular store organization best practices?

zustand-patterns covers the slices pattern for organizing large stores by splitting state into logical modules. Each slice manages its own state and actions, then combines into a single store. This modular approach improves maintainability and prevents monolithic state objects. The guide shows how to compose slices cleanly while maintaining type safety and avoiding common pitfalls like deeply nested state updates.

How do you implement persistence, devtools, and Immer middleware correctly in Zustand?

zustand-patterns explains middleware composition order: typically Immer wraps your store for immutable-style updates, persist handles localStorage synchronization, and devtools enables time-travel debugging. Correct ordering ensures each middleware receives the expected interface. The guide demonstrates configuring persist with custom storage, handling hydration, and using devtools to inspect state changes—essential for production applications.

How can zustand selectors prevent re-renders and optimize performance?

zustand-patterns emphasizes selector optimization to avoid unnecessary re-renders. Use shallow equality checks with useShallow for multiple values, or create memoized selectors that extract only needed state slices. Avoid destructuring directly from the store hook; instead pass selector functions. This ensures components only re-render when their specific selected values change, not on every store update.

What are common Zustand anti-patterns and best practices to avoid?

zustand-patterns identifies anti-patterns like destructuring store values outside selectors, storing server state in client stores, improper middleware ordering, and deeply nested state mutations. Best practices include keeping stores focused on client state, using selectors consistently, composing middleware correctly, and leveraging TypeScript for type inference. The guide provides clear examples of what to avoid and recommended alternatives for maintainable state management.

SKILL.md

rendered from the published skill — quoted content, verbatim