How to use React Context
Tags: react, javascript, webdev
Published: 2021-04-12 14:35:05

### Prerequisite

This article assumes you have a basic understanding of the React.js framework.

### What is Context?

Context is the React solution for creating global data. This makes it consumable from any component, no matter how deep it is.

The basic example of using Context. Assume you need to use the `theme` state. And it's defined in the `App` component, from the `GreatGrandChild` component. To do that, you'll pass the state through each component in the components tree until you reach the `GreatGrandChild` component.

Context saves you that burden of prop drilling states and methods. Create a separate context file holding the state and its methods.

### Creating A Context

Creating a Context has 3 steps: creating, providing, and consuming. To create a Context create a file under the src directory of the project. It'll be named after the context's name such as `themeContext.js`. Then use `createContext` API which creates the Context object. Finally, export the context object.

In *src/themeContext.js* file
{% gist https://gist.github.com/muhammadev/5d52377fcf1f07cca207542cbed278f2.js %}

&nbsp;

### Providing A Context
Each context object has a `Provider` component. The `Provider` component is used to provide the context to any of its children components. A `Provider` component has a `value` object prop which holds the context value and the updater method.

Think of the Provider component as the house of the context. The components inside that house have access to it, so they can consume it and listen to its updates. So, whenever there is a change, all the consumer components are re-rendered.

To make things easier, create the `Provider` component inside the context file.

In *src/themeContext.js* file
{% gist https://gist.github.com/muhammadev/a0cd18a4ea611ca279e96e1e2bf7ab63 %}

&nbsp;

Now that we have the `Provider` component, let's use it for providing the context. Import the `ThemeContextProvider` component from inside *App.js*. Then, pass the children components to it.

In *src/App.js*
{%gist https://gist.github.com/muhammadev/bdbdc521a9c1c065bc23ac3695980f20 %}

&nbsp;

### Consuming A Context
You have to tell React which component is dependent on the context. So that not every component is re-rendered on changes.

**Note:** There can be more than one provider in the components tree. The consumer components match the value of the nearest parent provider. If there are no providers above the consumer, it will receive the default value from the context file.

#### From class components
To consume the context object from a class-based component, assign the context object to a static `contextType` and you're good to go. This way you can destructure the `theme` value and its updater from anywhere inside a component class.

In *src/components/DeepLevelComponent.jsx*
{% gist https://gist.github.com/muhammadev/b2ff4c1cca1b63c072936d14af888acf %}

&nbsp;

Another way to consume a context from class-based components is to use the `themeContext.Consumer` component but it's more of a legacy way. The trade-off here is that you can't use the Context value anywhere but inside the render method. On contrary, `contextType` allows you to use the context in any lifecycle method besides the render method.


#### From functional components
It's not very different. We'll use React hook `useContext`. It does the same job as static `contextType`.

In *src/components/ChildComponent.jsx*
{% gist https://gist.github.com/muhammadev/74592835f46ca9f1997ded96b51c8f3f %}

&nbsp;

### Summary
Using context is easy and helpful. It could be what you're looking for, but be careful not to miss use it.

That's it. I hope I clarified things enough. Feel free to write your thoughts in the comment section below.