How to use Context in React apps

The complete guide to React.Context with demos and examples.

Photo by Kote Puerto on Unsplash

What is Context and why is it needed

Before in React for transferring data from top to the bottom (from parent to child), only the functionality of transferring props was used. This was an extremely inconvenient decision if the application had hundreds, and sometimes even thousands of related components. To solve this problem, the React developers came up with the Context API, which makes the transfer process much simpler and more concise. Context in React allows us to pass data through a component tree, bypassing passing data through props from one component to another. Here is the schema how React.Context works:

https://cmichel.io/you-might-not-need-react-context/

You can watch the Live Demo or continue the reading the guide.

Passing parameters using useContext

First, we have to create the context itself using the createContext() method. It takes on the default:

const Context = React.createContext(null);

By calling it, we create a context variable in which we got an object that includes 2 components which we can interact with.
Now we need to wrap our entire application in a Provider, which lies in the Context object. It allows all child components to subscribe to context value changes.

export default function App() {
  const value = "Context value";
  return (
    <Context.Provider value={value}>
      <Component />
    </Context.Provider>
  );
}

The second component that is in the object after the call to React.createContext is Consumer. It is intended to sign for a context change in a functional component. As a child component, it takes a function that receives the context and returns the React component. Thanks to the Consumer component, we have the ability to get values from the context in components.

So, we have passed the desired value into our context, but now how do we get it from the context in the desired component? A hook called useContext comes to the rescue. It subscribes the current component for context value changes. When the context value changes, our component is rerendered. In useContext we pass our context, and it will return the actual value of our context.

export default function Component() {
  const value = useContext(Context);
  return <div>{value}</div>;
}

That’s all, now we can use this value in exactly the same way as if we passed it through the classic props to the react component.

Live Demo | Source code:

Update useContext from child components

React.Context does not currently provide the ability to store and modify state. To do this, react provides tools such as useState or useReducer, or through a third-party storage implementation — redux or mobx. But what if we need to change the context value by clicking on, say, a button in a child component? No problem! We can create a useState in the parent component and pass to the context not only the value, but also the function to change it. Naturally, everything must be transmitted within the object.

Live Demo | Source code:

Multiple contexts

Often times, one context in an application is not enough and multiple contexts are required. To do this, as a rule, they simply wrap one Provider with another and pass the necessary values into them.

Live Demo | Source code:

If you are using react dev tools

The `Context` object can be set to the string property `displayName`. React DevTools uses this property when rendering context. For example, the following component will appear under the name MyDisplayName in DevTools. There is a complete guide how to implement it.

Conclusion

UseContext is a great way to pass data to different levels of the hierarchy. We figured out the concept of context in React and looked at the practical use of useContext with examples. By using the useContext hook, working with the context has become more concise and simple.

That said, avoid using it if possible, as it makes it harder to reuse components. Sometimes it is easier to pass components through props, even at several levels of the hierarchy. You might be interested in component composition (link), since it is a simpler implementation than context.