The React Context API

Hello everyone! Today we are going to talk about the Context API. The context API is one of the best features of react. So, if you are excited, keep on reading, this is going to be a good one.

What Is The React Context API?

React Context API is a way to essentially create global variables that can be passed around in a React app. This is the alternative to “prop drilling”, or passing props from grandparent to parent to child, and so on. Context is often touted as a simpler, lighter solution to using Redux for state management.

But before moving forward, lets see why we even need a state management tool and what state management is.

State Management:

In all applications, you have to keep the different parts of the UI in sync. Now, what I mean by that is if there is a part of the UI with which the user interacts, there can be a need for the other part of the UI to change accordingly, and in a large application where you might have several components, you will have to write a lot of code to get all this set up. Say that you are making an e-commerce store, where on clicking the add to basket, you want the basket count to go up by one. To make all this possible, you have to maintain the state properly, and this is where the state management tools come in handy. If you are making a single page web application, for a basic portfolio website or something, then you generally will not deal with state management issues, but if you are making a really big application, or even a relatively big application, then I am sure that you should use some kind of state management tool. Some examples here will be Redux, the Context API, Flux, or MobX.

Today, we will talk about the context API, which is a relatively simple solution to state management, which is also light weight and easy to understand.

Now, as you must have seen earlier, we talked about “prop drilling”. In several applications, you might face a problem where you are passing some data from the highest component,all the way to the last child component. This can be explained with the following diagram:

As you can see from the above diagram, we are passing some form of data from the parent component “App” all the way down to the cart component. Also, notice how the entire diagram forms a tree like structure. The Context API provides a way to pass data through the component tree without having to pass props down manually at every level. The syntax is really easy to understand and also, there is not much boilerplate code to write to get it set up.

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

What the context API does is that it makes a data layer which covers the entire application. All the props are passed inside of the data layer and there is only 1 main store house where all the data is passed to and from where all the data is extracted from. Think of the data layer to be an elevator between all the different levels of the app. Here is a visual representation of the data layer:

As you can see, here the data layer is formed around the entire application, and we are passing the data from one component to the data layer, instead of passing it through like props.

Now, lets look at some applications of the context API and when should we use it.

When to Use Context

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component:

With the context API, we can avoid passing props through intermediate elements, and directly pass the props to the last child or the child we are targeting:

How Do We Make A Context API?

There is a simple way to do so(in functional components):

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. All that we have to do is make a variable (here it is initialState) and give it and the provider an initial value. This initial value depends upon the project which you are making.

For more, I highly recommend going to the official documentation and reading their tutorials from here .

Thank you! I hope that you found this valuable!

Priyanshu Saraf