Learn the useContext Hook in React

Introduction

The useContext hook works with the Context API in React. It allows you to consume data across many components in your app.

To understand the useContext hook and how to use it, you first need to understand the Context API in react. Then, you will learn how useContext makes it easy to use.

What is the Context API?

The context API in React is used to manage state globally. It allows you to make data accessible to all components, no matter how deeply nested they are.

With the context API, there's no need for prop drilling. This is when you have to pass data through many components (some of whom may have no use for that data).

Prop drilling is a tedious process. And it also makes it hard to write reusable code in react.

When do you need Context?

Some examples of use cases for context include passing down props such as the following;

• Authenticated username.
• Theme.
• Preferred language.
• User settings.

Creating Context in React

The way you create context is to use the createContext method from React like so.

const UserContext = React.creatContext()

Every context has a Provider and a Consumer property. The Provider stores and keeps track of the data you want to pass to your components. And the Consumer lets you access(or consume) that data.

Context Provider

To access the Provider property, you use UserContext.Provider. Remember, context is an object.

The Provider comes with a value prop. Pass the data you want to share across components to the value prop. See the example below.

function Main() {
   const value = "Context Value"

   return (
       <UserContext.Provider value={value}>
           <ExampleComponent />
       </UserContext.Provider>
   )
}

Note: You need to wrap the Provider around all the components that will need to consume the context.

How to consume context

When it comes to consuming context, you can do it in two ways. You either use the useContext hook(recommended) or Context.Consumer.

First, you're going to see how to consume context using Context.Consumer. And then you will see how the useContext hook simplifies the process.

1. Using Context.Consumer

To use Consumer.Consumer, you use render props. The Consumer comes with a function as a prop. This function gives you access to the value from the Provider.

function ChildComponent() {
   return (
       <Context.Consumer>
           {providerValue => <div>{providerValue}</div>}
       </Context.Consumer>
   )
}

The value from the provider is given as the argument (providerValue) to the render prop function. The value can then be returned as part of the component's JSX.

Pass the value from the provider as an argument to the render prop function. And you can return the value as part of the component's JSX.

2. Using useContext hook

To consume context with useContext, you first import the hook from React. Usually, you will create your context in a separate file (with React.createContext). So you have to import it too.

import { useContext } from 'react'
import { exampleContext } from './exampleContext'

Then you initialize the context like so;

const providerValue = useContext(exampleContext)

Note that useContext accepts the context object as an argument. And not just the provider or the consumer.

• ✅ useContext(MyContext)
• ❌ useContext(MyContext.Provider)
• ❌ useContext(MyContext.Consumer)

Now, you have access to the value from the provider. And you use it in your component.

import { useContext } from 'react'
import { exampleContext } from './exampleContext

function ExampleComponet() {
   const providerValue = useContext(exampleContext)

   return (
       <div>{providerValue}<div>
   )
}

With the useContext hook, no need to worry about the render props pattern.

Conclusion

The Context API is a useful tool when sharing data among components in your app. Using context involves three steps.

• Creating the context.
• Providing the context.
• Consuming the context.

When it comes to consuming the context, you have two options. Either you use the useContext hook (recommended), or you Context.Consumer.