React State Management (Zustand)

Opinionated guidance for using Zustand in React applications.

When to Use

Use this skill when:

• Implementing global UI state (modals, progress indicators)
• Managing shared data across components
• Avoiding prop drilling
• Setting up cross-component communication

Non-Negotiables (MUST)

• One store per domain (e.g., uiStore, workspaceStore, statusLogStore).
• Keep stores focused; split when they grow too large.
• Use selectors to minimize re-renders: useStore((state) => state.specificValue).
• Actions should be defined in the store, not in components.
• Modals should read their visibility state from stores, not receive as props.

Store Organization

• One store per domain: uiStore, workspaceStore, statusLogStore, etc.
• Keep stores focused; split when they grow too large.
• Use selectors to minimize re-renders: useStore((state) => state.specificValue).
• Actions should be defined in the store, not in components.

Rules

Zustand Patterns

• zustand-when-to-use - When to use Zustand (modals, global UI state, shared data)
• zustand-store-organization - Store organization (one store per domain, selectors, actions)

Modal Pattern

• zustand-modal-pattern - Modal pattern with Zustand (read visibility from store)

Avoiding Prop Drilling

• zustand-avoiding-prop-drilling - Use Zustand stores instead of prop drilling

Related Skills

• busirocket-react-components-and-hooks - Component patterns

How to Use

Read individual rule files for detailed explanations and code examples:

rules/zustand-store-organization.md
rules/zustand-modal-pattern.md
rules/zustand-avoiding-prop-drilling.md

Each rule file contains:

• Brief explanation of why it matters
• Code examples (correct and incorrect patterns)
• Additional context and best practices