The useContext Hook provides all the same functionality you’d expect from the Context API, just packaged up into a simple to use Hook that you can use inside functional components. I recommend skimming through the official React documentation on Context before continuing. The React Context API allows you to easily access data at different levels of the component tree, without having to pass data down through props. This is where Context comes to the rescue. That’s painstaking, tiresome, and prone to errors. You’d have to pass that data through each and every component, through their props, until you reach the last child component.

In React data is passed top-down from one component to another through props. Now, imagine passing data from the uppermost component all the way down to the last child component.

Imagine for a moment that you have a React app with a single parent component that contains many levels of child components inside of it.

View Code What we’re building in this tutorial.īefore we jump into our code editor, let’s understand the React Context API a little more, and how the useContext Hook helps simplify sharing data with multiple React components.

Spotify reactjs