Using Context in React in the simplest way

Tram Ho

Using Context in React in the simplest way

Have you ever come across a situation where a Prop is requested by a component everywhere in a hierarchy tree?

Have you ever been frustrated by having to pass a prop down to a component in React just to push it down on your own component?

To overcome the above problems, you might consider using the Context API in React.


Before embarking on learning React Context, I set out the problem that you encounter as follows:

  • You have a data of 1 number with the value of the message “You won 100 million”
  • You need this data in 2 components: Red and Green.
  • Green component is a child of Blue component and Blue is a child of Red component. According to “genealogy”, Green is the nephew of Red component.

So how to send data from Red to Green? Normally, you will have to send data to Blue first, then from Blue to Green.

With the above problem, you will have the following code:

If the project is realistic, you have more than 3 floors as above, how complicated and inhibiting is it?

If before, you can use Redux or Mobx to handle this problem. Since React 16.3, you have a solution right in React. That’s the React Context.

What is the React Context API?

According to the original React documentation it describes:

A context is designed to share data that can be considered “global” for a tree of React components

Simply put, the React Context API is a way to create global variables that can be used throughout the application. As in the application, the values ​​in the theme, user or current locale … will be used anywhere.

We have a look at the comparison below:

In the next part, I will show you how to use Context in React. But for you to be receptive to this section, I recommend you to have the following basic knowledge:

  • Know and distinguish how to write components according to functional or class
  • Already know how to use React Hook.

If you do not know both above knowledge, please review here Link

Use React Context

The example problem is that we need to manage users in the application.

First, I create a context named: UserContext.js. Next, I create a provider (which is a component providing values) and a consumer (a component that uses values).

Create Context

First, the content of UserContext.js

Providing Context

The provider needs to wrap the parent element. Therefore, we will wrap the App component in the provider.

Below we will find a way to get values ​​from Context.

Consuming Context

Providing value to a provider does the same thing when writing a component in a class or function style. However, with taking value, the writing style will differ slightly between the two schools.

Write consumer components according to class:

Write consumer components in function style

It is done.

Hopefully through this article, you have one more solution to write React code to be cleaner and tidy.

How are you enjoying this React Context? Leave a comment below for me and everyone knows.

Share the news now

Source : Viblo