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 apps with heavy server interaction, pair React Query with a light client state solution.

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

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 preferences, 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 rather than on any store update.

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

Keep state local when it is only used by one component or its children, such as form inputs or toggle states. Also avoid storing derived data that can be computed, and never duplicate server state that React Query already manages.