busirocket-react-state-management-zustand_skill

Overview

This skill presents an opinionated set of Zustand state management patterns for React applications. It focuses on organizing stores, minimizing re-renders, and practical patterns for global UI state such as modals and cross-component communication. The guidance is concise and intended to be applied directly in TypeScript/React/Next.js projects.

How this skill works

The skill prescribes one store per domain (for example uiStore, workspaceStore) and defines actions inside stores so components remain thin. It emphasizes selectors to subscribe to specific slices of state and avoid unnecessary re-renders. Modal visibility and other UI flags are read from stores rather than passed via props, enabling simpler cross-component communication.

When to use it

• Implementing global UI state (modals, progress indicators)
• Sharing data across multiple disparate components
• Avoiding deep prop drilling and tightly coupled component trees
• Managing domain-specific state that multiple pages or components consume

Best practices

• Create one focused store per domain and split stores when they grow too large
• Define actions inside the store, not inside components, to centralize logic
• Use selectors (useStore(state => state.value)) to minimize component re-renders
• Keep modal visibility and UI flags in the uiStore and read them in modal components
• Favor small, composition-friendly stores over a single monolithic store

Example use cases

• uiStore for modal visibility, theme, and transient UI flags
• workspaceStore to hold current project, selections, and permissions shared across pages
• statusLogStore for global logging, notifications, and progress indicators
• Replace prop drilling by reading shared state from a zustand store in deeply nested components
• Define actions like openModal/closeModal in uiStore and call them from toolbar, list items, or routes