This content originally appeared on DEV Community and was authored by Taron Vardanyan
For years, Redux was the go-to for state management in React apps.
Then came React Query (now TanStack Query) — and it changed how we handle server state forever.
But here's the confusion many developers face:
“If I’m using React Query, do I still need Redux?”
“Can Redux Toolkit replace React Query?”
Let’s clear the fog. 🌫️
🧠 First — Two Different Problems
Before comparing them, it’s crucial to understand what each tool actually manages.
| Type of State | Description | Example |
|---|---|---|
| Client State | Data that exists only in the UI or app memory. | Modal open/close, filters, active tab |
| Server State | Data fetched from APIs or databases, often cached. | Users list, product data, comments |
- 🧩 Redux Toolkit (RTK) → best for client state
- 🌐 React Query → best for server state
🧩 Redux Toolkit Overview
Redux Toolkit (RTK) is the official, modern way to write Redux — without the boilerplate.
It’s great for:
- Local or global UI state
- Caching small API responses
- Complex app logic
- Predictable, centralized state updates
Installation
npm install @reduxjs/toolkit react-redux
Example
import { createSlice, configureStore } from '@reduxjs/toolkit'
import { Provider, useSelector, useDispatch } from 'react-redux'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value++ },
},
})
const store = configureStore({
reducer: { counter: counterSlice.reducer },
})
function Counter() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<button onClick={() => dispatch(counterSlice.actions.increment())}>
Count: {count}
</button>
)
}
✅ Pros
- Predictable, centralized store
- Time-travel debugging and middleware
- Immutable updates via Immer
- Integration with async logic via
createAsyncThunk - Scales beautifully for enterprise apps
⚠️ Cons
- Boilerplate compared to local hooks
- Manual caching and invalidation for API data
- More setup for smaller apps
🌐 React Query (TanStack Query) Overview
React Query manages remote data fetching, caching, and syncing — not app logic.
It automates the painful parts of server-state management:
- Fetching
- Caching
- Stale data invalidation
- Background updates
- Pagination & optimistic updates
Installation
npm install @tanstack/react-query
Example
import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
function Todos() {
const { data, error, isLoading } = useQuery({
queryKey: ['todos'],
queryFn: () => fetch('/api/todos').then(res => res.json())
})
if (isLoading) return <p>Loading...</p>
if (error) return <p>Error: {error.message}</p>
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.title}</li>)}
</ul>
)
}
✅ Pros
- Automatic caching and refetching
- Handles background sync and retry logic
- No reducers or actions — pure hooks
- Amazing devtools for debugging
- Ideal for data-heavy apps (dashboards, SaaS)
⚠️ Cons
- Not designed for client UI state
- No central store or global reducer logic
- Limited control over global mutation side-effects
⚔️ Head-to-Head Comparison
| Feature | Redux Toolkit | React Query |
|---|---|---|
| Primary Focus | Client/Global State | Server/Remote State |
| Data Source | Local or manual API calls | Fetched via queries |
| Caching | Manual | Automatic |
| Invalidation | Manual | Automatic |
| Setup Complexity | Moderate | Simple |
| Global Store | Yes | No |
| DevTools | Redux DevTools | React Query Devtools |
| Best For | State logic, app-wide control | Fetching & syncing backend data |
🔀 Can You Use Both Together?
Absolutely — and many real-world apps do. 💪
They solve different concerns, and together they shine:
- Use React Query for all server communication
- Use Redux Toolkit for UI and app logic
Example integration:
// react-query handles data
const { data: todos } = useQuery(['todos'], fetchTodos)
// redux handles UI
const filter = useSelector(state => state.filter.value)
const filteredTodos = todos?.filter(todo => todo.status === filter)
This approach keeps your data layer and UI layer cleanly separated.
🧩 TL;DR
| You Need... | Use |
|---|---|
| To manage app-wide UI state | Redux Toolkit |
| To handle API fetching and caching | React Query |
| To replace Redux entirely | React Query + local state |
| To handle everything with structure | Combine both |
💬 Final Thoughts
Redux Toolkit and React Query aren’t competitors — they’re complements.
Think of them like this:
🧠 Redux: Your app’s brain (logic, actions, state)
🌍 React Query: Your app’s bloodstream (data flow and sync)
Use the right tool for the right job — and your React app will stay clean, fast, and predictable.
If you liked this post, follow me for more deep dives on React architecture and state management!
👉 @taronvardanyan
This content originally appeared on DEV Community and was authored by Taron Vardanyan
Taron Vardanyan | Sciencx (2025-11-12T17:49:27+00:00) Redux Toolkit vs React Query: Do You Really Need Both? 🤔. Retrieved from https://www.scien.cx/2025/11/12/redux-toolkit-vs-react-query-do-you-really-need-both-%f0%9f%a4%94/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.