What is Context in React? How to use Context in React?

Have you ever wondered about passing data or using states in between different components without using Props? Or passing a state from Parent to Child component without manually passing a prop at every level?  

Let’s understand with an example below:

Here we have a parent component app.js where we have defined our states. We want to access the data of state in the last child which is “Child 1.2” in the below chart.

The ideal or older approach in React is to pass the data from the root component to the last component is via Props. We have to pass props in each intermediary level so as to send in the last level. While this approach also works, the real problems begin if data is needed on a different branch i.e Child 2.1 or Child 2.2 in above chart…

In order to solve this problem, we need to pass data from the root/top level of the application through all the intermediate components to the one where we want to pass the data, even though some intermediate components don’t even need it.  

This mind-numbing process is known as prop drilling,  

where you’re passing the state from your root component to the bottom and you end up passing the data via props through components that do not even necessarily need them

One really good solution to solve the above problem is using Context 

According to the React documentation: 

 “Context provides a way to pass data through the component tree without having to pass props down manually at every level”

Ordinarily, we’d have used any state management library like Redux or have used HOC’s to pass the data in a tedious manner. But what if we don’t want to use it all? Here comes the role of new Context API!

In layman words, it gives an approach to make specific data available to all components throughout the React component tree regardless of how deeply nested those components are.

Context is just like a global object to the subtree of the React component.

The Context API is convenient for sharing data that is either global, such as setting the header and footer theme of a website or logic of user authentication and many more. In cases like these, we can use the Context API without using any extra library or external modules.

It can also be used in a multilingual application where we want to implement multiple languages that can be translated into the required text with the help of ContextAPI. It will save prop-drilling   

In fact, in any situation where we have to pass a prop through a component so it reaches another component, inside down the tree is where we can use the Context API.

The context API is a way to pass data from top component to bottom ones, without manually passing it to via props. Context is fundamentally utilized when some data needs to be accessible by numerous components at different nesting levels. 

To create a new Context, we can use the React createContext function like below:

In React, data is often passed from a parent to its child component as a property. Here, we can also omit the default value which we have passed to the context, if needed.

Three things are needed to tap into the power of context:

To create a context we can use React.createContext method which creates a context object. This is used to ensure that the components at different level can use the same context to fetch the data.  

In React.createContext, we can pass an input parameter as an argument which could be anything or it can be null as well.

In this example, a string is passed for the current Context which is “dark”. So we can say, the current theme required for a specific component is Dark.  

Also, we have exported the object so that we can use it in other places.

In one app, React also allows you to create multiple contexts. We should always try to separate context for different purposes, so as to maintain the code structure and better readability.

We will see that later in our reading.  

What next??

Now, to utilize the power of Context in our example, we want to provide this type of theme to all the components.  Context exposes a pair of elements which is a Provider Component and a Consumer Component.

Okay, so now we have our Context object. And to make the context available to all our components we have to use a Provider.  

But, what is Provider?

According to the React documentation:

“every context object comes with a Provider React component that allows consuming components to subscribe to context changes”

In other words, Provider accepts a prop (value) and the data in this prop can be used in all the other child components. This value could be anything from the component state.

We can say that a provider acts just like a delivery service.When a consumer asks for something, it finds it in the context and delivers it to where it’s needed.

But wait, who or what is the consumer???

What is Consumer? 

A consumer is a place to keep the stored information. It can request for the data using the provider and can even manipulate the global store if the provider allows it. 

In our previous example, let’s grab the theme value and use it in our Header component. 

We can also change the value of the provider by simply providing a dynamic context. One way of achieving it is by placing the Provider inside the component itself and grabbing the value from component state as below:

Simple, no? We can easily change the value of  the Provider to any Consumer.

We all pretty know that there are two methods to write components in React, which is Class based components and Function based components. We have already seen a demo of how we can use the power of Context in class based components.  

One is to use the context from Consumer like “ThemeContext.Consumer” and the other method is by assigning context object from current Context to contextType property of our class.

There is always a difference in how we want to use the Context. We can either provide it outside the render() method or use the Context Consumer as a component itself.  

Here in the above example, we have used a static property named as contextType which is used to access the context data. It can be utilized by using this.context. This method however, limits you consuming, only one context at a time.

Context with Functional based components is quite easy and less tedious. In this we can access the context value through props with the help of useContext method in React.

This hook (useContext) can be passed in as the argument along with our Context to consume the data in the functional component.

It accepts a context object and returns the current context value. To read more about hooks, read here.  

Our previous example looks like:

Now, instead of wrapping our content in a Consumer component we have access to the theme context state through the ‘context’ variable.

But we should avoid using context for keeping the states locally. Instead of  conext, we can use local state there.

It may be possible that we want to add multiple contexts in our application. Like holding a theme for the entire app, changing the language based on the location, performing some A/B testing, using global parameters for login or user Profile…

For instance, let’s say there is a requirement to keep both Theme context and userInfo Context, the code will look like as:

It’s quite possible in React to hold multiple Contexts, but this definitely hampers rendering, serving ‘n’ number of contexts in ‘m’ component and holding the updated value in each rendered component.

To avoid this and to make re-rendering faster, it is suggested to make each context consumer in the tree as a separate node or into different contexts.

And we can perform the nesting in context as:

It’s worth noting that when a value of a context changes in the parent component, the child components or the components’ holding that value should be rerendered or changed. Hence, whenever there is a change in the value of provider, it will cause its consumers to re-render.

Don’t you think this concept is just amazing?? Writing a global context like theme or language or userProfile and using the data of them directly in the child or other components?

Implementing these stateful logic by global preferences was never so easy, but Context made this transportation job a lot simple and achievable!

Hope you find this article useful. Happy Coding!

Research & References of What is Context in React? How to use Context in React?|A&C Accounting And Tax Services
Source

Share on Facebook

Tweet

Follow us