React Context vs React Redux, when should I use each one?

Alfrex92 picture Alfrex92 · Mar 30, 2018 · Viewed 49k times · Source

React 16.3.0 was released and the Context API is not an experimental feature anymore. Dan Abramov (the creator of Redux) wrote a good comment here about this, but it was 2 years when Context was still an Experimental feature.

My question is, in your opinion/experience when should I use React Context over React Redux and vice versa?

Answer

Shubham Khatri picture Shubham Khatri · Mar 30, 2018

As Context is no longer an experimental feature and you can use Context in your application directly and is going to be great for passing down data to deeply nested components which what it was designed for.

As Mark erikson has written in his blog:

If you're only using Redux to avoid passing down props, context could replace Redux - but then you probably didn't need Redux in the first place.

Context also doesn't give you anything like the Redux DevTools, the ability to trace your state updates, middleware to add centralized application logic, and other powerful capabilities that Redux enables.

Redux is much more powerful and provides a large number of features that the Context Api doesn't provide, also as As @danAbramov mentioned

React Redux uses context internally but it doesn’t expose this fact in the public API. So you should feel much safer using context via React Redux than directly because if it changes, the burden of updating the code will be on React Redux and not you.

Its upto Redux to actually update its implementation to adhere with the latest context API

The latest Context API can be used for Applications where you would simply be using Redux to pass data between component, however application which use centralised data and handle API request in Action creators using redux-thunk or redux-saga still would need redux. Apart from this redux has other libraries associated like redux-persist which allow you to save store data in localStorage and rehydrate on refresh which is what context API still doesn't support.

As @dan_abramov mentioned in his blog You might not need Redux, that redux has useful application like

  • Persist state to a local storage and then boot up from it, out of the box.
  • Pre-fill state on the server, send it to the client in HTML, and boot up from it, out of the box.
  • Serialize user actions and attach them, together with a state snapshot, to automated bug reports, so that the product developers
    can replay them to reproduce the errors.
  • Pass action objects over the network to implement collaborative environments without dramatic changes to how the code is written.
  • Maintain an undo history or implement optimistic mutations without dramatic changes to how the code is written.
  • Travel between the state history in development, and re-evaluate the current state from the action history when the code changes, a la TDD.
  • Provide full inspection and control capabilities to the development tooling so that product developers can build custom tools for their
    apps.
  • Provide alternative UIs while reusing most of the business logic.

With these many application its far too soon to say that Redux will be replaced by the new Context API