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
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}!`
}
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();
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>
)
}
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'
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);
}
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}!`
}
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)
@ 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...
Nice tutorial well explained, thank you!
Thanks! Glad you liked it!
Below "Consume the context," you say we have to import useEffect, but you meant useContext, no?
Definitely meant useContext 🤦🏼♂️. Lol thanks, good call 👍