UI Development

React Context API

React Context API is a way to make data available to all components throughout the component tree no matter how deeply nested that component may be. This is alternative to passing props from grandparent to parent to child, and so on, also known as ‘props drilling’.

According to the React documentation:

“Context provides a way to pass data through all the components without passing props down manually at each level.”

When to Use Context API?

Context is the way to share data that can be ‘global‘ to a component tree, such as the theme or the current authenticated user.

For example,

In the above example, we specified the theme using a prop in the Parent Component called theme. We had to pass that props to all components down the component tree to get it where it is needed which is the GreatGrandChild component. The Child and GrandChild had nothing to do with the theme props but was just used as an intermediary.

Now, imagine the GreatGrandChild component was more deeply nested than it was in the example. We would have to pass the theme props the same way we did here which would be unmanageable. This is the problem that Context solves.

Creating Context

Now we will create theme context file (ThemeContext.js) that will contain the different color values for both light and dark themes in the state and we have to also create a provider which is a tag that surrounds whichever components we want to be able to use that context.

The Provider tag is provided by the context itself. On the provider tag we have to specify a value property, and this is going take whatever data we want to provide to the components that this wraps. To access all the children, pass through props.

Surround all the components with Context Provider.

We have two different methods of writing components in React:  functions or classes. The process of using context in both methods is different.

  • Consuming context with class-based components: –

There are two methods to consume context with class-based components.

       1. Using Class.contextType method –

The way we use this method is by declaring static and it needs to be called contextType and set it equal to whichever context that we want to consume in this component. And it looks up the component tree and the first time it finds a provider for this context, it will have access to data provided. To access the data in this component, we need to use ‘this.context’ property.

Note: This type implementation works on only classes not in functions and cannot create multiple contexts.

       2. Using Context.Consumer method – 

Like we got provider, we also get consumer method from create context property. Context consumer expects to pass in a function with context as param and return the JSX. By accessing the context property, we get the data provided.

Note : This type of implementation works both in class and functional based components and can create multiple contexts.

  • Consuming context with functional components: –

Consuming the context with functional based components is less tedious and easier than class based components.

To consume context in a functional based component, we will use a hook called ‘useContext()’.

Updating Context Data 

Now let’s try switching between the light and dark themes. Let’s edit ThemeContext.js file.

Within the value property, also pass the updater function to the context provider. And to toggle the themes, lets write a theme togglers function –

And import the ThemeToggler in the main component where context provider is wrapped.

Now we can toggle to the different themes of our app.

Creating Multiple Contexts

Let us create an Auth context

Again surround all the components with Auth context provider, it might be inside/outside the theme context provider, like –

Consuming Multiple Contexts

Using static contextType method, we cannot create multiple contexts. But with Consumer method, we can consume multiple contexts by nesting one inside the other.

Consuming multiple contexts with Hooks is easier.

That’s it. We have successed in understanding and learning :

  • When to use Context API
  • Creating and Consuming it in both functional and class-based components
  • Updating the context
  • Creating and Consuming multiple contexts.

About The Author