What is React Context API?

Taking a deeper dive into React Context API and how it differs from redux

This past week, I wanted to dive into newer technologies in React, study them and practice using them. After redux, I read about React Context API and how it helps with state management. Of course, when I first studied it, it seemed almost exactly like redux. However, after practicing and playing around with store setup and state retrieval there are some key differences that may make React Context API a bit more easy for beginners (if I may say so) by not being as context heavy to set up as redux. Let’s take a look at why.

First, What is React Context API?

To avoid this and help make your code more efficient — welcome redux and React Context API. The setup for both of these tools can be intimidating at first, but once you get the hang of it, you’ll realize how efficient data retrieval becomes in your React application. Yes, if I missed it, ‘state’ simply refers to data that is needed to render specific UI correctly.

Redux consists of four main building blocks:

  1. One single, main centralized state.
  2. Reducer functions — these contain the logic needed to alter state (similar to the functionality of {…this.setState}.
  3. Actions — these are dispatched to trigger a specific reducer function to run, depending on specific switch cases.
  4. Subscription — in order to actually use this state in the react component.

React has amazing documentation that goes deeper into these four levels to explain what exactly is happening with state management and data passing.

React’s Context API is quite similar as to what it delivers to the developer — easier and more efficient state management- but with three main setup blocks:

  1. Context Object — defined in a seperate file or next to the component in a component js file. Any data can be stored in this object, and there can be several in one react application.
  2. Context Provider- provides the context object to all of your components that may need it.
  3. Context Consumer- a wrapper component that can be used to ‘inject’ the Context provided in some parent component.

In summary — providing Context in something like your App.js file (or any component that wraps all of your components in the application) and consuming context in the components that actually need the Context data.

React Context API or Redux?

Although React Context API is a bit cleaner and let setup heavy, it is not built for high frequency updates. This was seen when people began to switch to react context API from redux. However, for the moment and if you are just newly diving into redux/react context API for state management, using React Context for low frequency updates such as user authentication may be a good start.

Personally, while building a e-commerce application similar to Amazon, React Context AP — both setup and usage — seemed a-breeze after using redux. It’s built into react so there is no need to update and install new dependencies. The API is also pretty straightforward to use, especially if you’ve used Hooks before. Lastly, async functions will not require an extra package (such as redux-thunk) to be implemented.

All in all, both are optimized systems and work to make applications’ stronger and efficient. Using any will only benefit your app; React Context is jsut an easier start ;)

Happy coding!

References:

https://reactjs.org/docs/context.html

Recent software engineering graduate who enjoys exploring the intersection between business and code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store