DEV Community

Cover image for React Hooks - useContext
Andrew
Andrew

Posted on • Edited on

React Hooks - useContext

What is it?

The useContext hook is a great hook to use when you need to send props down through multiple, nested child components.

Instead of passing it through every single component on the way down, you can define it in the parent component. Then, bring it into the nested component where you need it, while bypassing the middle components you'd normally have to send it through.

Here's an example

Let's say you have an App component. Inside that App component, you have a Profile component. Inside the Profile component, you have a Greeting component.

So that's:

App --> Profile --> Greeting
Enter fullscreen mode Exit fullscreen mode

Now, let's say you have a user in your App (parent) component, and you want to pass the user property into the Greeting (nested child) component.

Normally, you'd have to send that property through the Profile component, then into the Greeting component. Like so:

//App.js
const App = () => {
  let user = 'Shred Flanders';
  return <Profile user={user} />
}

//Profile.js
const Profile = props => {
 return <Greeting user={props.user}/>
}

//Greeting.js
const Greeting = props => {
  return `Welcome, {props.user}!`
}
Enter fullscreen mode Exit fullscreen mode

Create a context

To start using useContext, you must first create a context. So, in our App (parent) component, we'll import createContext from React. Then, create a user context.

//App.js
import { createContext } from 'react'
export const UserContext = createContext();
Enter fullscreen mode Exit fullscreen mode

Note: we're exporting the UserContext so we can import it
into nested components later.

With that UserContext in place, we can wrap a provider around components, then consume the property in any child component.

So, we'll set that provider where we want it and pass it a property.

//App.js
import { createContext } from 'react'
export const UserContext = createContext();
const App = () => {
  let user = 'Shred Flanders';
  return (
  <UserContext.Provider value={user}>
    <Profile />
  </UserContext.Provider>
  )
}
Enter fullscreen mode Exit fullscreen mode

Note that now, we're not sending the user property into Profile. We're sending it into the UserContext Provider via value={user}. We can then grab that value in any of the nested components.

Consume the context

To consume the value in any nested component, we have to import the useContext hook, and the context we want to use.

So in the Greeting component:

//Greeting.js
import { useContext } from 'react'
import { UserContext } from './App.js'
Enter fullscreen mode Exit fullscreen mode

Then, we'll pass our UserContext into the useContext hook, letting the hook know which context we want to use.

const Greeting = props => {
  const user = useContext(UserContext);
}
Enter fullscreen mode Exit fullscreen mode

The useContext will return the value that we sent into UserContext.Provider value={user}. We're saving it in the Greeting component to a constant variable, user.

Now, we're free to use that constant/value in our Greeting component.
(and we never had to touch the Profile component! 🎉)

const Greeting = props => {
  const user = useContext(UserContext);
  return `Welcome, {user}!`
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

The useContext hook is a very useful tool in React. It could be used for changing a theme and updating that theme in the different components it needs to. It prevents "prop drilling" like I've shown you here.

If you want a more visual example, check out my YouTube video here:

If you like learning about similar topics, feel free to check out my YouTube and Instagram.

Hope this helped somebody and thanks for reading!

-Andrew

Top comments (5)

Collapse
 
lalami profile image
Salah Eddine Lalami

@ IDURAR , we use react context api for all UI parts , and we keep our data layer inside redux .

Here Article about : 🚀 Mastering Advanced Complex React useContext with useReducer ⭐ (Redux like Style) ⭐ : dev.to/idurar/mastering-advanced-c...


Mastering Advanced Complex React useContext with useReducer (Redux like Style)

Collapse
 
gietson profile image
Gietson

Nice tutorial well explained, thank you!

Collapse
 
techcheck profile image
Andrew

Thanks! Glad you liked it!

Collapse
 
merthod profile image
Merthod

Below "Consume the context," you say we have to import useEffect, but you meant useContext, no?

Collapse
 
techcheck profile image
Andrew

Definitely meant useContext 🤦🏼‍♂️. Lol thanks, good call 👍