react-state-management

Choose based on app size and state complexity: Zustand or Jotai for small apps with simple state, Redux Toolkit for large apps with complex state, and Jotai when you need atomic granular updates. For heavy server interaction, pair React Query with a light client state library.

Use the onMutate callback to cancel outgoing queries, snapshot the previous data with getQueryData, and set the new value with setQueryData. On error, roll back using the snapshot, and on settle, invalidate the query key to refetch fresh data.

Use React Query for server state since it handles caching, refetching, and staleness automatically. Reserve Redux Toolkit or Zustand for client-only state like UI toggles and modals, and avoid duplicating server data in global stores.

Use selective subscriptions by passing a selector function to the store hook, such as useStore((state) => state.user). Components then only re-render when their selected slice changes, not when unrelated store fields update.

Replace action type constants and switch-based reducers with createSlice, which generates actions automatically and allows mutable-style updates via Immer. Use createAsyncThunk for async logic instead of handwritten thunk action creators.

Avoid globalizing component-specific UI state, derived data that can be computed, and server data that React Query already manages. Colocate state as close to where it is used as possible to reduce coupling and re-render scope.