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

Use useQuery with a query key factory for fetching and caching, and useMutation for writes. React Query handles staleTime, garbage collection, and cache invalidation, so you should not duplicate server data into a client store.

In useMutation's onMutate callback, cancel outgoing queries, snapshot the previous cache value, and set the new data with setQueryData. On error, roll back using the snapshot, and invalidate the query in onSettled to refetch.

Yes, Zustand supports selective subscriptions by passing a selector function to the store hook, so components only re-render when their selected slice changes. You can also export dedicated selector hooks like useUser or useCart.

Replace action type constants and switch-based reducers with createSlice, which generates actions automatically and uses Immer so you can write mutation-style logic safely. Add createAsyncThunk for async flows and typed useAppDispatch and useAppSelector hooks.

Keep state local when it is only used by one component or a small subtree, and never duplicate server-fetched data into global stores since React Query already manages it. Derived values should be computed rather than stored.