Accessing Context with useContext()

Learn how touse Hooks to pass data throughout our app without manually passing props down the tree.

We'll cover the following

What is useContext?

The third and final basic Hook is useContext(). It allows us to consume data from a Context Provider without having to define a Provider component with a function as a child.

The useContext() Hook is passed a Context object, which you can create by using React.createContext(). It will then return the value of the next higher-up provider in the component hierarchy. If the value in the Context is changed within the provider, the useContext() Hook will trigger a re-render with the updated data from the provider. That just about sums up the functionality of the useContext() Hook.

Example

In practice, what we’ve discussed translates to something like the following example:

Get hands-on with 1400+ tech skills courses.