When building a React app, choosing the right state management tool can be crucial for the application’s success or a maintainability nightmare. Two of the most discussed options today are Redux and React Query.
They are often compared side by side, but they solve different problems. Through this article, we will explore the fundamental differences between Redux and React Query, determine when to use each, and discuss how to combine them when necessary, along with code examples, pros and cons, and a summary table at the end.
What Is State and Why Do We Need to Manage It?
State refers to any data in the application that changes over time. This includes things like:
- Whether a user is logged
- What is in user’s shopping cart
- Which tab is currently active
- API responses from the backend
Why is State important?
With React, we describe what the UI should look like based on the current state. So when the state changes, the UI updates automatically.
However, the larger the app becomes, the more challenging it is to maintain a consistent, organized, and predictable state.
That’s where state management libraries come in.
Types of State in React
There are two major types of state in React apps:
As the app grows, managing state well becomes critical. It ensures that the UI stays in sync with the underlying data, avoids unnecessary network calls, and improves both performance and the user experience.
Redux: A Centralized State Container
Redux is a well-known library that manages the application’s state in a single store using a predictable state container.
Predictable = given the same input (state + action), the application will always produce the same output, i.e., the next state.
Key concepts:
- Actions: Describe what happened
- Reducers: Functions that determine how the state changes based on actions
- Types: Constants to represent action types
- Selectors: Functions used to extract specific pieces of data from the store’s state
- Middleware: Intercept actions before they reach the reducer
Redux is great for global client state, especially when multiple components need to share and mutate the same data.
Pros:
- Great for global app state
- Predictable and traceable state changes
- Well documented
Cons:
- A lot of boilerplate (actions, reducers, types)
- Not optimized for API data fetching
- Manual handling of loading/error states
React Query: The Server Side One
React Query (also known as TanStack) is a data fetching and caching library. It helps with fetching, caching, and updating API data with minimal code. It doesn’t replace Redux, but complements it by focusing specifically on API data.
Key features:
- Fetches and caches server data
- Automatically manages loading, error, and success states
- Supports background refetching, retries, and pagination
- Built-in tools for optimistic updates and query invalidation
- Works well with REST or GraphQL
Optimistic updates = Update the UI before the server confirms (great for fast UX).
Invalidation = Mark data as stale after a mutation, and trigger refetch to get the latest state.
Pros:
- Less boilerplate
- Built-in cache, pagination, and retries
- Automatic background refetching
Cons:
- Not suitable for client/UI state
Code Example: Fetching Users
Redux:
- actions.js
export const fetchUsers = () => async (dispatch) => {
dispatch({ type: 'FETCH_USERS' });
try {
const res = await fetch('/api/users');
const data = await res.json();
dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_USERS_ERROR', error: error.message });
}
};
- reducer.js
const initialState = {loading: false, data: [], error: null};
function userReducer(state = initialState, action) {
switch (action.type) {
case 'FETCH_USERS':
return {...state, loading: true};
case 'FETCH_USERS_SUCCESS':
return {data: action.payload, loading: false, error: null};
case 'FETCH_USERS_ERROR':
return {...state, loading: false, error: action.error};
default:
return state;
}
}
- React Query:
const fetchUsers = async () => {
const res = await fetch('/api/users');
return res.json();
}
const {data, isLoading, error} = useQuery(['users'], fetchUsers);
Testing
Redux is built around pure functions (reducers, selectors), which make it ideal for unit testing.
- Ability to test reducers independently of the UI
- Inputs (state + action) -> Outputs (next state)
- Easy to mock actions and test store logic
React Query handles side effects and state internally, so it’s more common to write integration tests. It focuses more on testing component behaviour with mocked API responses and testing query states (isLoading, data, error).
Can They Work Together?
Yes. React Query is not a replacement for Redux. Redux can be used for local/global app state, while React Query can be used to async server state. Using a hybrid approach can bring clarity and separation of concerns.
Comparison Table
How to Make the Choice?
Use Redux when:
- Need to manage complex UI or local state
- App-wide state transitions need to be explicitly handled
- Business logic depends on synchronizing client-side actions
Use React Query when:
- Need to refetch and cache API data
- Data is frequently changing and must stay in sync with the server
- Require minimal setup for handling loading, errors, and retries
Conclusion
Both Redux and React Query are powerful libraries, but for different reasons. Understanding their roles helps build scalable and performant applications. Instead of asking which is better, ask: “What kind of state am I managing?” and it will guide the decision.
“React Query vs Redux: Understanding the Key Differences” Tech Bite was brought to you by Nejra Lačević, Software Engineer at Atlantbh.
Tech Bites are tips, tricks, snippets or explanations about various programming technologies and paradigms, which can help engineers with their everyday job.
