react-state-management

Choose Zustand or Jotai for small apps with simple state, Redux Toolkit for large apps with complex state, and Jotai for atomic granular updates. For heavy server interaction, pair React Query with a light client state solution.

Use the onMutate callback to cancel outgoing queries, snapshot the previous value, and set the new data optimistically. On error, roll back using the snapshot from context, then invalidate the query onSettled to refetch.

Use React Query for server state since it handles caching, staleness, and refetching automatically. Reserve Redux Toolkit or Zustand for client-only state like UI toggles and form drafts, avoiding duplicated server data.

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

Replace action type constants and switch statements with createSlice, which generates actions automatically and uses Immer for mutable-style updates. Use createAsyncThunk for async logic instead of manual thunk middleware.

Avoid globalizing component-specific UI state, derived data that can be computed, and server data that React Query should own. Colocate state as close to where it is used as possible.