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
Install
pproenca/dot-skills/zustand · repository language: Shell
git clone https://github.com/pproenca/dot-skills
cp -r dot-skills/skills/.experimental/zustand ~/.claude/skills/zustandnpx skillfed install pproenca/dot-skills/zustandFrequently 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)
Read as markdown · JSON record · Browse the source repository
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