Register to get access to free programming courses with interactive exercises

Context API JS: React

Transferring data via props down the component hierarchy is a verbose, yet simple mechanism. You can always see where the data came from and how it got in, and the components are easy to reuse because they depend solely on the input data. But there are situations where passing props doesn't fit with the way the code works.

Let's take a hypothetical current user as an example. Often, user data is needed simultaneously in different parts of the page, and in very deep components. To do this, you would have to pass the user literally all over the hierarchy, even when the component doesn't need it. The only purpose of such a transfer is to send the data to its destination, passing all the intermediate components along the way. It turns out that a lot of components do not use the user in any way, they just pass them on down the chain. The user's data, in our situation, are global. Several components at different levels of the hierarchy need them at once. There is, however, a workaround for such tasks in React.

The Context API is a mechanism for making global data available from any component directly, without props. Its use boils down to three steps:

  1. Creating the context

    // A default value is passed to the parameter
    // Here we pass an empty object, because there's no user yet, but there will be one (and it will be an object)
    // The context can only store one value
    // The context name is chosen based on what data are stored inside
    const UserContext = React.createContext({});
    
  2. Transferring data into the context. It works like this: We wrap the required components in a context component <UserContext.Provider> and pass the required data there in the value prop

    // The context will only be available inside the components it wraps
    // currentUser - the current user's data
    <UserContext.Provider value={currentUser}>
      <App />
    </UserContext.Provider>
    
  3. Getting data from the context in the right place

    import UserContext from '...';
    
    // Any component inside the <UserContext.Provider>
    class InnerComponent extends React.Component {
    
      // Defining the type of context
      static contextType = UserContext;
      render() {
        // Accessing the context through this.context
        return <Profile user={this.context} />;
      }
    }
    

Unlike props, by default, changing the data in the context does not result in a redraw. It's ideal when the data in the context is read-only. It's better to store modifiable data inside component states. However, if you really need to, it's possible to respond to a change of context. You can read more about this in the documentation. This feature is rarely used in application code, but various libraries are based on it.


Recommended materials

  1. Context API

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.