Redux + TanStack Query: Why Modern Apps Use Both

Redux and TanStack Query solve different problems, which is why they work so well together in modern React apps.

Redux is ideal for the state your application actively controls: selected filters, modal visibility, form steps, and other interaction-driven data. TanStack Query is better suited to server state such as user records, dashboards, and paginated lists that arrive from the network.

A useful mental model

1 Redux owns UI intent

Use it for state transitions that reflect what the user is doing in the interface.

2 TanStack Query owns remote data

Use it for fetching, caching, invalidation, retries, and background refetching.

3 The split keeps code clear

Your reducers stay focused on interaction logic, while your queries stay focused on data lifecycle.

A practical example

A profile screen is a good example. Redux can hold the selected user ID, while TanStack Query fetches the profile and keeps it cached.

Redux slice for UI state

      import { createSlice } from '@reduxjs/toolkit';

const uiSlice = createSlice({
  name: 'ui',
  initialState: { selectedUserId: '1' },
  reducers: {
    selectUser: (state, action) => {
      state.selectedUserId = action.payload;
    },
  },
});
    

TanStack Query for remote data

      import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users', userId],
    queryFn: () => fetch('/api/users/' + userId).then((res) => res.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Something went wrong</p>;

  return <h2>{data.name}</h2>;
}
    

Benefits that show up quickly

Less repetitive request code TanStack Query handles loading, error, retry, and refetch patterns so your components stay simpler.

Better caching Repeated reads can reuse prior results instead of firing duplicate requests.

Cleaner UI state Redux remains a strong home for filters, tabs, drawers, and form flow state.

More resilient apps Background refetching and cache invalidation make the experience smoother when the network is unstable.

Where this pattern pays off

Scenario	Why the pair works well
Dashboards	Redux manages filters and selections while TanStack Query keeps metrics fresh.
Admin tools	Redux handles navigation and form state while queries keep tables current.
Commerce apps	Redux manages cart interactions while TanStack Query caches products and orders.

In practice, the best setup is not to choose between Redux and TanStack Query. It is to use them together: Redux for the state the app controls, and TanStack Query for the state the server provides.

Redux + TanStack Query:Why Modern Apps Use Both