Redux

A major advantage of React Query is that it is far simpler to write than React Redux . In React Redux, an operation to optimistically update a field requires three actions (request, success, and failure), three reducers (request, success, and failure), one middleware, and a selector to access the data.

But now it’s possible to replace Redux with React Hooks and the Context API . In this tutorial, you’re going to learn a new way of handling state in your React projects, without writing excessive code or installing a bunch of libraries — as is the case with Redux.

When should you use React context? React context is great when you are passing data that can be used in any component in your application . These types of data include: Theme data (like dark or light mode)

Context + useReducer are React features, and therefore cannot be used outside of React . A Redux store is independent of any UI, and so it can be used separate from React. The React DevTools allow viewing the current context value, but not any of the historical values or changes over time.

For simple or low-frequency updates like theme settings, user authentication data, React Context is the perfect choice . On the other hand for complex or high-frequency update Redux should be used, React Context won’t be a good solution.

Internally, React Redux uses React’s “context” feature to make the Redux store accessible to deeply nested connected components . As of React Redux version 6, this is normally handled by a single default context object instance generated by React.