zustand
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 helps optimize store performance and prevent unnecessary re-renders through selector best practices and architecture patterns.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-24
Zustand helps optimize store performance and prevent unnecessary re-renders through selector best practices and architecture patterns. 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.
Use it when
- Zustand selectors extract specific state slices.
- Zustand middleware configuration handles persistence via the persist middleware, which syncs state to localStorage or custom storage.
Verify before relying
Read SKILL.md below before installing (47 files). Open directory: indexed for reading, not audited.
Install
pproenca/dot-skills/zustand · repository language: Shell
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 are zustand state management best practices?
Zustand emphasizes creating focused stores with clear responsibilities, using selectors to subscribe only to needed state slices, and avoiding monolithic stores that trigger re-renders on unrelated updates. Best practices include memoizing selectors, leveraging middleware for cross-cutting concerns, and keeping actions pure and predictable. The skill provides 43 prioritized guidelines covering store architecture, selector patterns, and performance optimization to help you build maintainable, efficient state management.
How does zustand selector memoization prevent re-renders?
Zustand selectors extract specific state slices, and memoization ensures components only re-render when their selected values actually change. By using shallow equality checks or custom comparison functions, selectors prevent unnecessary renders triggered by unrelated state updates. Zustand's built-in selector optimization, combined with proper memoization patterns, allows fine-grained subscriptions so your React components stay performant even in complex applications with frequent state changes.
How do you configure zustand middleware for persistence and SSR?
Zustand middleware configuration handles persistence via the persist middleware, which syncs state to localStorage or custom storage. For SSR hydration in Next.js, configure middleware to delay hydration until the client mounts, preventing hydration mismatches. The skill covers practical setup patterns for both persist and devtools middleware, showing how to chain them correctly and handle edge cases like server-side rendering where window may be undefined.
What TypeScript patterns work best with zustand stores?
Zustand supports strong typing through generic parameters on the create function and explicit state/action interfaces. Best patterns include defining separate types for state and actions, using discriminated unions for async loading states, and leveraging inference for type safety without repetition. The skill provides advanced TypeScript patterns that integrate with middleware, selectors, and custom hooks to maintain type safety across your entire store architecture.
How can you avoid unnecessary re-renders in zustand?
Zustand avoids unnecessary re-renders through granular selectors that subscribe only to needed state, shallow equality checks, and proper selector memoization. Avoid selecting the entire store object; instead, extract specific values. Use custom comparison functions when shallow equality isn't sufficient. The skill's performance guide covers these techniques alongside store architecture patterns to help you optimize re-render behavior and maintain React application responsiveness.
Should you use multiple zustand stores or one monolithic store?
Zustand supports both patterns depending on your needs. Multiple focused stores work well for domain separation and independent scaling, while a monolithic store simplifies global state access. The skill covers architectural trade-offs: multiple stores reduce coupling and allow selective subscriptions, but require coordination; monolithic stores centralize logic but risk triggering re-renders across unrelated features. Choose based on your application's complexity and performance requirements.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Community Zustand Best Practices
Comprehensive performance and architecture guide for Zustand state management in React applications. Contains 43 rules across 8 categories, prioritized by impact from critical (store architecture, selector optimization) to incremental (advanced patterns).
When to Apply
Reference these guidelines when: - Creating new Zustand stores - Optimizing re-render performance with selectors - Implementing persistence or middleware - Integrating Zustand with SSR/Next.js - Reviewing code for state management patterns
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Store Architecture | CRITICAL | store- |
| 2 | Selector Optimization | CRITICAL | select- |
| 3 | Re-render Prevention | HIGH | render- |
| 4 | State Updates | MEDIUM-HIGH | update- |
| 5 | Middleware |
(truncated - see the full file via the links below)
File tree — 15 files
skills/.experimental/zustand/SKILL.md
skills/.experimental/zustand/assets/templates/_template.md
skills/.experimental/zustand/metadata.json
skills/.experimental/zustand/references/_sections.md
skills/.experimental/zustand/references/adv-computed-getters.md
skills/.experimental/zustand/references/adv-context-stores.md
skills/.experimental/zustand/references/adv-third-party-integration.md
skills/.experimental/zustand/references/adv-transient-updates.md
skills/.experimental/zustand/references/mw-combine-order.md
skills/.experimental/zustand/references/mw-devtools-actions.md
skills/.experimental/zustand/references/mw-immer-nested.md
skills/.experimental/zustand/references/mw-persist-migration.md
skills/.experimental/zustand/references/mw-persist-partialize.md
skills/.experimental/zustand/references/mw-slice-middleware.md
skills/.experimental/zustand/references/render-avoid-object-returns.md
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 › “Optimize Zustand store performance and reduce unnecessary re-renders”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Zustand State Management teaches you to build type-safe global state for React without boilerplate. Master the three core patterns—basic stores, TypeScript-first setup, and persistent storage—while avoiding common pitfalls like hydration mismatches and infinite render loops.
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.
Zustand provides lightweight state management for React using hooks instead of providers or complex patterns. It's designed for apps needing global state without Redux overhead, offering direct mutations and flexible hydration for server-side rendering.
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 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 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.