react-state-management

Manage React state by separating concerns: use local component state for UI, Zustand or Jotai for global state, and React Query for server state. This pattern ensures predictable data flow and scalable architecture for medium-to-large apps.

Choose Redux Toolkit for complex, normalized state with strict data flow, Zustand for a lightweight hook-based store, and Jotai for atomic state management. Selecting the right tool depends on your app's required state pattern and architectural scale.

Implement optimistic updates in React Query by configuring mutation caches to immediately reflect UI changes before server confirmation. This server state synchronization approach ensures robust data flow between the cache and the backend.

You need React Query if your app requires robust server state synchronization, caching, and data normalization. Redux Toolkit manages global client state, while React Query specifically handles fetching, caching, and updating asynchronous server data.

Avoid a global store when state is local to a single component or needs server synchronization. Overusing global state tools like Redux Toolkit or Zustand for ephemeral UI state creates unnecessary complexity and hinders predictable data flow.