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.
For more information on
redux check this link
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.
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
- React-Query = server state library(save/cache api response)
- Redux = client state library(globally accessible client state should be stored).
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.
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
- What is the main difference between React Query and Redux?
- What is the difference between React Native and React?
- What is the difference between NextJs and Create React App
- What is the difference between hashHistory and browserHistory in react router?
- What is the difference between Redux Thunk and Redux Saga?
- React Native - What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()?
- What is the main difference between using React-Redux Hooks and React-Redux Connect()?
- React - What is the difference between renderToString and renderToStaticMarkup
- React Hooks: What is the difference between 'useMutationEffect' and 'useLayoutEffect'?
- What is the difference between React component instance property and state property?
- What is the difference between React component and React component instance?
- How does React router works and what is the difference between <link> and<Route>
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- ES6 React - What are the difference between reference, shallow copy and deep copy and how to compare them?
- What is the difference between useHistory() and props.history in React Route
- what is the difference between getDefaultProps and getInitialState react js
- React Transition Group: What is the difference between the appear, enter, exit events and the enter, active done className suffixes?
- Redux saga: What is the difference between using yield call() and async/await?
- What is the difference between accessible, accessibilityLabel and accessibilityHint properties of Text component in react native?
- What is the real difference between value and defaultValue in React JS?
- What is the difference between React and Preact diff algorithm in depth
- What is the difference between a fibre object in React 16 and a React Element?
- What is the difference between Routing in React and Express
- What is the difference between passing a function name in onclick react and calling it through callback
- What is the difference between key and id in React component?
- what is the difference between React setState and Hooks setState?
- what is the difference between element attribute and component attribute in React <Route><Route/> tag
- What is the difference between function and functional React component?
- What is the difference between Nav.Link vs Link vs NavLink in react router DOM and react bootstrap?
More Query from same tag
- How to update nested state's nested object property Reactjs?
- How can I update my news feed after I add new post
- React Redux form and connect syntax
- How to override MUIv4 class globally in JSS for nested themes?
- Generics for object arguments
- Animating react-transition-group with ReactDOM createPortal
- React Data Grid rows disappearing on dynamically providing height
- How to create multiple pages from single json files in Gatsby
- React useState & useEffect confusion
- How to transform class-based React-Redux code using Hooks
- ReactJS - Is it possible to prevent/exclude a column from being sorted?
- React Radio onChange doesn’t work when deselected by other radio
- How do I get the id of div wrapper in React when childnodes are the click event target?
- Navigate is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
- Cannot get the response made from axios call
- Flow: is not a polymorphic type
- How to update react datatable ( react-data-table-component library) based on button click
- React Sort Child Components of Parent Component based on state in Child
- FlatList not scrolling
- Electron doesn't launch app after run it in development
- Is it possible to upload multiple files, get their ids and then bind those ids to the parent resource with ImageInput?
- Sorting not being applied in a list of objects
- Dockerize React app and Go API - Proxy Problem
- React Cannot read property of undefined - Array.map (<anonymous>)
- How make recursive method in React JS
- setState not a function?
- useEffect cleanup never called when using Electron
- How to change antd theme in Vite config?
- add tooltip to span tag with certain class on mousehover
- How to transpile and minify single file with webpack?