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

Read it in 9 Mins

Last updated on
07th Jun, 2022
Published
24th Aug, 2020
Views
8,705
What is Context in React? How to use Context in React?

What the hack is Context?

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? To master usereducer hook in React concepts, click here. 

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.

app.js Parent Component
app.js Parent ComponentThe 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,  

Prop Drilling
Prop Drillingwhere 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.

When to use the Context API

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.

Introducing 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:

const MyContext = React.createContext(defaultValue);

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.

React data passing from parent to its child
React data passing from parent to its child 

Let’s Get Started With Context

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

1. The context itself

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.

import React from `react'; 
const ThemeContext = React.createContext('dark');  // Create our context       
export default ThemeContext;

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.

2. A context provider

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.

// myProvider.js
import React from 'react';
import Theme from './theme';
const myProvider = () => (
<Theme.Provider value='dark'>
...
</Theme.Provider> 
);
export default myProvider;

We can say that a provider acts just like a delivery service.

prop finding context and deliverling it to consumer
prop finding context and deliverling it to consumerWhen 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???

3.  A context 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. 

// Header.js 
  
import React from 'react'; 
import Theme from './theme'; 
  
const Header = () => ( 
   <Theme.Provider value='dark'> 
       <Theme.Consumer> 
           {theme => <div>Selected theme is {theme}</div>} 
       </Theme.Consumer> 
   </Theme.Provider> 
); 
  
export default Header;

Dynamic Context:  

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:

// Footer.js 

  
import React from 'react'; 
  
class Footer extends React.Component { 
   state = { 
       theme: 'dark' 
   }; 
  
   render() { 
       return ( 
           <MyThemeContext.Provider value={this.state.theme}> 
               <ThemedButtonHolder /> 
           </MyThemeContext.Provider> 
       ); 
   } 
}

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

Consuming Context With Class-based Components

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.

import React, { Component } from "react";
import MyThemeContext from "../Context/MyThemeContext";
import GlobalTheme from "../theme";
 
class Main extends Component {
   constructor() {
       super();
   }
   static contextType = MyThemeContext;  //assign context to component
   render() {
       const currentTheme = GlobalTheme[this.context];
       return (
           ...
       );
   }
 
}

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.

Consuming Context With Functional Components

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.

const value = useContext(MyContext);

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

Our previous example looks like:

import React, { useContext } from 'react'
import MyThemeContext from './theme-context'
 
const User = props => {
   const context = useContext(MyThemeContext)
   return <p className={context.isLight ? 'light' : 'dark'}>...</p>

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.

Use of Multiple Contexts

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:

<ThemeProvider> 
  <UserInfoProvider> 
    ... 
  </UserInfoProvider> 
</ThemeProvider>

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.

<ThemeContext.Provider value={theme}>
   <ColourContext.Provider value={colour}>
       <NavItem />
   </ColourContext.Provider>
</ThemeContext.Provider>

And we can perform the nesting in context as:

<ThemeContext.Consumer>
   {theme => (
       <ColourContext.Consumer>
           {colour => (
               <p>Theme: {theme} and colour: {colour}</p>
           )}
       </ColourContext.Consumer>
   )}
</ThemeContext.Consumer>

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.

Conclusion

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!

Having challenge learning to code? Let our experts help you with customized courses!

Profile

KnowledgeHut

Author
KnowledgeHut is an outcome-focused global ed-tech company. We help organizations and professionals unlock excellence through skills development. We offer training solutions under the people and process, data science, full-stack development, cybersecurity, future technologies and digital transformation verticals.