Use the useContext Hook to Consume Context in Function Components

Dave Ceddia
InstructorDave Ceddia

Share this video with your friends

Send Tweet
Published 3 years ago
Updated 3 years ago

React Hooks introduced a number of useful functions, one of which is useContext. It allows you to consume a Context in a function component without using a Consumer directly. This helps to cut down on unnecessary nesting in your components’ JSX, making them easier to read. In this lesson we’ll see how to replace a Consumer with the useContext hook.

Instructor: [00:00] React hooks allow us to access context from a function component without using consumer and without using the render props pattern, saving us a lot of nesting. To do this, we can import useContext from React and we'll change our function body into one that has braces and a return.

[00:15] At the top of the function, we can call useContext with a full context object. That will be user context, which we don't have here yet. This will return the value that was passed into the provider. From there, we can destructure the user from it.

[00:29] We can do the same with the email context, calling useContext and passing in the full email context. Before we can use these, we need to import them. Right now, our contexts only export provider and consumer.

[00:44] We'll open these up. At the top, we'll create a variable to hold the full context and save the context into it, along with destructuring the provider and consumer. At the bottom, we can export user context.

[00:56] We'll go back to message list and do the same for email context, creating the email context variable, saving the context into it, and exporting it. Now, in message list, we can replace the consumers with the full contexts and remove the consumers from the rendered output.

[01:16] Now, when we save, the app is still working, and we've saved four levels of nesting.

ed leach
ed leach
~ 3 years ago

In index.js what is the purpose of const s = useState(7) on line 10? I see that it is logged out on the next line, but I still don't know why it is there.

Dave Ceddia
Dave Ceddiainstructor
~ 3 years ago

That is ... I'm not sure why that's there 😄 I think I was testing whether I had the right version of React installed and forgot to remove it. You can safely ignore those lines 👍

Dave Ceddia
Dave Ceddiainstructor
~ 3 years ago

FYI: The 'before' code for this lesson is here if you need it.

Conrado Fonseca
Conrado Fonseca
~ 3 years ago

When using the useContext, do I need to have the context provider wrapper (eg. in the index.js page)?

Dave Ceddia
Dave Ceddiainstructor
~ 3 years ago

@Conrado: Yeah, useContext takes the place of the Consumer, but you still need a Provider somewhere higher up in the tree.

Nazariy
Nazariy
~ 3 years ago

So it is possible to have two (or more) contexts with hooks, but what about having multiple contexts in a class component? Are we restricted to just one context (via contextType)?

Dave Ceddia
Dave Ceddiainstructor
~ 3 years ago

@Nazariy Yep, you can grab values from multiple contexts by calling useContext as many times as you want. With a class you can use multiple contexts by nesting the Consumer elements, but you can only assign a single one to contextType.