What is the main difference between React Query and Redux?

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.

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

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.

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.

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

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 grate 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

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.