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:
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({});
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>
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.
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
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.