state-management-flow

Centralize React state by creating a dedicated /store directory with a slice-based organization using Zustand or Redux. This approach eliminates prop drilling and ensures predictable data sharing across nested components.

Structure your store by adopting a slice-based pattern to separate concerns within a dedicated /store directory. This scaffold enforces predictable state flows and improves maintainability as your React app scales.

Reduce rerenders in complex UIs by applying memoized selectors and shallow comparisons when accessing centralized state. This performance optimization prevents components from rendering unless their specific state slice changes.

Yes, this approach manages UI modals, forms, and cross-cutting data sharing across nested components. It is specifically designed for practical use cases like dashboards and editors with complex shared state requirements.

Avoid centralized store architecture if your React app has minimal shared state or lacks nested component depth. For simple component trees, local state or Context may be sufficient without the overhead of a slice-based store scaffold.

You need to install either Zustand or Redux in your React project to implement this state management approach. The skill applies the chosen library to scaffold a store directory and enforce centralized UI state flows.