0163-react-state-management

What problem does it solve?

React apps often suffer from tangled state logic, duplicated data, and inconsistent server updates because developers don’t reliably separate local UI state, global client state, and server state concerns.

Core Features & Use Cases

• State categories & selection guidance: Decide between Redux Toolkit, Zustand, Jotai (global/client state) and React Query (server state) based on app size and update patterns, including atomic/granular updates and optimistic UI.
• Implementation patterns: Use TypeScript-friendly examples for Redux Toolkit slices and async thunks, Zustand slice-based stores with selective subscriptions, Jotai atoms (including derived, storage-backed, and async atoms), and React Query query/mutation flows with optimistic updates and rollback.
• Client + server synchronization: Combine a UI store (e.g., Zustand) for client-only state with React Query for cached server data to avoid duplicating server state and to keep rendering efficient.

Quick Start

Ask the AI to “Design a React state approach for my app using Redux Toolkit for complex shared state, React Query for server data, and Zustand or Jotai for minimal UI state, including an optimistic mutation strategy.”