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

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

The Hexlet support team or other students will answer you.