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
Decision gist · record as of 2026-07-28
Zustand Patterns teaches you how to build scalable React state management with Zustand 5.x using proven patterns and best practices. 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.
Use it when
- zustand-patterns teaches setting up type-safe stores by defining clear store interfaces.
- zustand-patterns covers the slices pattern for organizing large stores by splitting state into logical modules.
Verify before relying
Read SKILL.md below before installing (13 files). Open directory: indexed for reading, not audited.
Install
yonatangross/orchestkit/zustand-patterns · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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.
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
(truncated - see the full file via the links below)
File tree — 13 files
src/skills/zustand-patterns/SKILL.md
src/skills/zustand-patterns/checklists/zustand-checklist.md
src/skills/zustand-patterns/examples/zustand-examples.md
src/skills/zustand-patterns/references/anti-patterns-and-integration.md
src/skills/zustand-patterns/references/core-patterns.md
src/skills/zustand-patterns/references/middleware-composition.md
src/skills/zustand-patterns/rules/_sections.md
src/skills/zustand-patterns/rules/_template.md
src/skills/zustand-patterns/rules/zustand-middleware-order.md
src/skills/zustand-patterns/rules/zustand-middleware-pitfalls.md
src/skills/zustand-patterns/rules/zustand-slice-pattern.md
src/skills/zustand-patterns/scripts/store-template.ts
src/skills/zustand-patterns/test-cases.json
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn Zustand 5.x patterns and best practices for React state management”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Zustand is a minimal state manager for React built on useSyncExternalStore, offering type-safe stores, atomic selectors to prevent unnecessary re-renders, and composable middleware like persist and devtools. It handles client-side global state, persistent preferences, and multi-domain stores while keeping bundle size lean.
This skill teaches you how to build and organize Zustand stores for managing shared client state across your application. It covers store structure, the recommended middleware stack (devtools, persist, immer), and how to create selector hooks for performance. Follow the patterns and validation checklist to keep stores focused, type-safe, and production-ready.
This skill provides 43 prioritized guidelines for building performant Zustand stores in React applications. It covers critical areas like store architecture and selector optimization alongside practical patterns for middleware, SSR integration, and TypeScript typing. Use it when creating stores, refactoring for performance, or reviewing state management code.
Zustand-5 covers modern state management patterns for client-side applications using Zustand. Master store creation, selector optimization to prevent unnecessary re-renders, persistence with localStorage, async data fetching, and the slices pattern for organizing complex state across multiple domains.
Zustand State Builder guides you through creating minimal, type-safe state stores with optional middleware for persistence, debugging, and immutable updates. Learn to structure stores for async operations, split logic into modular slices, and connect them to React components.
Zustand-5 provides practical patterns for building React state management with Zustand 5, including basic stores, persistence middleware, selector optimization, and async data handling. Learn the slices pattern for composing complex stores, Immer integration for immutable updates, and DevTools debugging. Includes examples for accessing stores outside components and subscribing to state changes.
More skills zustand-state (Apache-2.0) · zustand-state-management (MIT) · Zustand (NOASSERTION) · zustand (MIT) · State Management (unlicensed) · zustand-state-management (Apache-2.0) · testing-patterns (MIT) · xstate (Apache-2.0)