What is the main difference between React Query and Redux?

Question

currently I am using redux in different projects for state management. A few days back, I listened about react-query which is also used for state management and provides caching and async fetching. I am trying to figure out the main difference between these two libraries. Where I should use react-query and in which cases I need redux.

Tanatanach

You can use both , and redux has rtk-Query which is an alternative to react-query. – Breslau

Answer 1

React-query is what you would call a specialized library. It holds an api cache for you - nothing else. And since it is specialized, it does that job quite well and requires less code.

Redux on the other hand gives you tools to just about store anything - but you have to write the logic. So you can do a lot more in Redux, but you'll have to potentialy write code that would not be necessary with a specialized library.

You can use them both side-by-side: api cache in react query, rest of your global state in Redux.

That said, the official Redux Toolkit also ships with an api cache abstraction RTK Query since version 1.6 with a similar feature set as React Query, but some different concepts overall - you might also want to check that out.

Irreproachable

Does this mean if we are using redux-toolkit we don't need to use react query? – Tanatanach

Yes, unless you really want to. – Irreproachable

RTK query centralize API calls different to how react query does – Breslau

@HossamMaher yes, they have a different style of doing it, but the amount of code you write is very similar. As for style: that is normal every time you switch library - every one of those will feel a little bit different to use and have emphasis on different things. – Irreproachable

@Irreproachable if Redux is to be used, why would one pick React Query over RTK? – Curacy

@Curacy personal preference? Using them feels differently, and one might prefer one style of writing code over the other. – Irreproachable

Answer 2

react-query is designed to deal with data that is stored on a remote server. To access this data, your app needs to use asynchronous requests. This is where you probably want to deal with caching, loading state, network failures, etc.

That is where react-query shines.

Redux on the other ends deals with data on the client-side. For example the content of a text input or the state of a modal. You don't need to deal with network-related issues. But you do need to deal with complex sequences of causes and effects.

That is where redux shines

Ovolo

Thanks, isn't that right redux toolkit also provides memozing selectors that can store server-side data and change if it's updated? – Tanatanach

Probably! I guess you are talking about RTK Query, the motivation part talks about React Query: redux-toolkit.js.org/rtk-query/overview#motivation – Ovolo

But redux-saga is also for some data on remote servers. – Arte

You can do without RTK queries. I personally use action creators from RTK. It enables the possibility to fetch data from a remote server and manage this data in the way I want. The data is organized in slices (RTK feature again). And I never had any problem with that... I feel like RTK just makes it possible for you to manage your data the way you want. You can fetch and interact with it straight away, or maybe later. – Flowered

Answer 3

Redux and react-query are 2 very different things: react-query is used for data synchronization, Redux is a global state manager. react-query is used to keep synch all your apps to the same db, Redux is used to share a part of the app state to all the components that need to read that state.

An example: I have an app to chat with other users. With react-query I keep all the apps synch with all the messages users received, then I store the messages in Redux in order to have messages on chat page and on history chat page.

Low

I understand that these are tools that tackle the same problem using different approaches but does react-query not let you read cache data from another component using useQuery hook? I think it's redundant to create a duplicate of your cache inside Redux. – Palmy

@OleksandrFomin is right. React Query already has a global cache. You would only use Redux if you want a formal way to store resources that have nothing to do with HTTP requests (aka not using axios) – Organize

Answer 4

React Query manages Server State. Its main function is to handle functions between Server and client.

Redux handles client-state. Redux can be used to store asynchronously Data.

So, they have their unique role at different levels and both can be used side by side.

Mawkish

Can you tell more about "server state"? – Tanatanach

Server state is the data that is stored on the server, your app needs to have a back and forth between the client and the server to access this state. You probably want caching, loading state, etc. That is where react-query shines. Data on the client is data that lives... in the client. For example the content of a text input or the state of a modal. You don't need to deal with latency, caching, network errors, etc. But you need to deal with complex causes and effects sequences. That is where redux shines. – Ovolo

Answer 5

We should distinguish between two kind of states, client state & server (or remote) state:

• client state contains:
  • locally created data that has not yet been persisted to the server.
  • UI state that handles active routes, selected tabs, spinners, pagination controls, and so on.
• server state is everything related to:
  • data persisted remotely that requires asynchronous APIs for fetching and updating

When it comes to client state, Redux is a great management tool for managing application’s state.

On the other side, to manage server state, we can use regular state management tools but they are not so great at working with async or server state. So, to resolve this, we use React Query. As described on their documentation, React query is a great tool for:

• Caching... (possibly the hardest thing to do in programming)
• Deduping multiple requests for the same data into a single request
• Updating "out of date" data in the background
• Knowing when data is "out of date"
• Reflecting updates to data as quickly as possible
• Performance optimizations like pagination and lazy loading data
• Managing memory and garbage collection of server state
• Memoizing query results with structural sharing

Rosewater

Answer 6

• React-Query = server state library(save/cache api response)
• Redux = client state library(globally accessible client state should be stored).

Fuddle

Answer 7

You can simply to think:

• React Query = axios + cache logic
• Redux can store synchronized data and asynchronized data

---

By the way, I use context manage synchronized state, React Query manage asynchronized state now.

Autocade

Answer 8

Redux is good choice if your application has complex state management or if you need to share state between multiple components.

On the other hand

React Query can be used an application requires lots of data fetching.It provides the fetching, caching, and updating data from the APIs.

In short, we can say that if we have a lot of APIs to work with, and our primary function is to display data from APIs, RQ is the better choice. On the flip side, if you need more control and data manupulation of the state of your application , Redux is the better option.

Jameljamerson

Answer 9

react-query:

• Mostly focussed on data fetching / updating / caching / synchronisation
• Plays important role when application have frequent api calls
• Caching time can be changed.

redux:

• Mostly focussed on state management at client side
• Need to implement major code like store / action / reducer
• Global state management is not time dependent

Matsumoto