state-management

React state management should use local useState for simple, isolated component data and global stores for cross-page or deeply shared UI state. A decision tree helps map scenarios like form inputs to useState and multi-page flows to Zustand or Redux Toolkit.

Choosing between Context API and Zustand for frontend state architecture depends on update frequency and scope. Context API suits low-frequency shared UI state, while Zustand handles high-frequency updates and complex slices better without triggering unnecessary component re-renders.

Redux Toolkit works for simple form state in React but introduces unnecessary boilerplate. For simple forms, local useState is recommended to avoid anti-patterns, reserving Redux Toolkit for complex cross-page state and real-time data synchronization scenarios.

The best way to scaffold a Zustand store for a React dashboard is to define production-ready slices with clear selectors. This state management pattern isolates dashboard data logic and wires it directly to components, preventing unnecessary re-renders.

Managing server-derived state separately from client-side state in Redux involves isolating fetched data into dedicated slices. This state management pattern uses selectors to consume server data, keeping client UI state decoupled and avoiding common anti-patterns.

Common frontend state management anti-patterns include overusing global stores for local UI state and mixing server-derived data with client state. Applying a decision tree prevents these by enforcing production-ready patterns and clear boundaries between useState, Context, and Zustand.