react-state-management

Separate client and server state using Context API for local UI state (themes, preferences) and TanStack Query for server state (data caching, invalidation, revalidation). This division creates a maintainable architecture where each layer handles its specific concerns efficiently.

Optimistic UI updates in TanStack Query allow you to update the UI immediately while mutations execute server-side, then revert if the mutation fails. This pattern improves perceived performance and user experience without waiting for server confirmation.

Use Context API for ephemeral client state like theme, user preferences, and UI toggles. Use TanStack Query for server state—fetched data, caching, background revalidation, and synchronization with remote sources.

Yes. State normalization structures data efficiently across components by storing entities separately and maintaining relationships. Combined with TanStack Query's caching and Context's client state, this ensures a single source of truth and reduces duplication.

Custom hooks like useTheme and useQuery accessors encapsulate state access logic, making components cleaner and state consumption reusable. They abstract the underlying Context and TanStack Query details from component code.

Separation eliminates state-management bloat by letting each layer handle what it does best: Context handles ephemeral UI state without network concerns; TanStack Query handles data consistency, caching, and server synchronization without UI clutter.