Redux solved the “props drilling” problem by having a global state of the application and binding the relevant pieces of data to each component and updating the global state from the children with action dispatch. Without Redux, you can achieve the same result, by managing a state in a higher order component and passing down necessary data all the way down to the children. To update the global state from a child, you may have to pass another set of functions to the children. This can become a hell of a mess. So we all can agree that Redux make our day easier.
Watch Redux tutorial
On the other hand, Context API is/was built into React itself for a long time as an experimental API. But now with the React 16.3, it’s no longer an experimental API. We can use it in production application as well 🙂 . I read somewhere (now I can’t find it 🙁 ) that actually the React Redux is using the React Legacy context API underline.
Watch Context API introduction
The simplest reason for getting rid of React Redux is because if the same capabilities are built in to React itself, there’s no reason for adding additional dependencies to the application.
Okay. It’s time to get our hands dirty.
In a higher order component, you can initialize a context and wrap the component. The context contains two components in it, the Provider and the Consumer. You can initialize the state in Provider and wrap the parent component as follows.
In lower level component, you can just consume the data as follows by wrapping the component by the Consumer.
Pretty easy, huh? But it has its own pros and cons.
Pros
- No additional dependencies
- Easy to implement
- Less weight and higher performance
Cons
- No tools like Redux Dev Tools to debug yet.
Okay, fellas. That’s it for now. Lets see what will come in the future for the Context API. Personally, I’m waiting for a debug tool like Redux Dev Tool for the Context API. 🙂
Interested in backend technologies as well? Check my article regarding Google Firebase Function vs AWS Lambda, which are really booming topics these days.
Hi there! Thanks for the article! Truly, Context API is a great functionality within React. But IMO, there are some moments when it’s better to stick with Redux (we’ve been writing about it here: https://ideamotive.co/blog/redux-vs-context-api/). I’m talking about situations like:
– If you need to use middleware for various purposes.
– When data coming from multiple endpoints influence single component/view.
– When you want to have greater control over actions in your applications.
– If you don’t want server response to directly change the state of your application