react-state-management

Choose 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, 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, staleness, and refetching automatically. Reserve Redux Toolkit or Zustand for client-only state like UI preferences, modals, and form drafts to avoid duplicating 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 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. Combine slices with configureStore and add typed useAppDispatch and useAppSelector hooks for TypeScript.

Keep state local with useState or useReducer when it is only used by one component or its children. Global stores should hold state shared across distant components; over-globalizing adds complexity and causes avoidable re-renders.