This content originally appeared on DEV Community and was authored by Srishti Prasad
What is useContext hook?
useContext provides a way to pass data through the component tree(child component) without having to pass props down manually at every level.
Let’s understand using this flowchart
Let’s, consider username which is to be passed to level A,B,D straight forward but to pass to nested levels we have to pass it through intermediate level also that is if we want to pass it to level G we have to pass it as prop to its level D,E,F then it will go to G.
So, to avoid this passage of prop to every intermediate level ,we use useContext hook.
How to use useContext hook
Here I’ll consider rightmost part of flowchart
App
D
E
F
Goal is to pass username as prop from App component and read that in F component
Lets understand how to get data from App component to component F
The three steps which we need to keep in mind while using useContext Hook
1.Create context
2.Provide context with a value & the provider must wrap the children component for the value to be
available.
3.final step is to consume the context value
To do this, first create context, for that you must Import createContext and initialize it and then export context from app component.
App.js code
import React,{createContext } from "react";
import ComponentC from "./components/ComponentC";
export const UserContext = createContext();
Note: we’re exporting the UserContext so we can import it
into nested components later.
Now, 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.
import React,{createContext } from "react";
import ComponentC from "./components/ComponentC";
export const UserContext = createContext();
export default function App() {
Let user=”johny”;
return (
<div className="App">
<UserContext.Provider value={user}>
<ComponentC/>
</UserContext.Provider>
</div>
);
}
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.
Third and the last step is to consume directly in component F without passing it to intermediate component D & E
The useContext will return the value that we sent into UserContext.Provider value={user}
import {UserContext} from '../App'
import React,{useContext} from "react"
function ComponentF(){
const user=useContext(UserContext);
return(
<div>
Hello!! {user}
</div>
);
}
export default ComponentF;
Now, you all might be wondering what if we have multiple context value that is to be passed through nested component?
Let's break it down
We will create another context named ChannelContext
export const ChannelContext=createContext();
Wrap this context provider inside the initial context provider
<UserContext.Provider value={'Hello'}>
<ChannelContext.Provider value={'world'}>
<ComponentC/>
</ChannelContext.Provider>
</UserContext.Provider>
Following is the complete code inside App.js
1.)App.js
import React,{createContext } from "react";
import ComponentC from "./components/ComponentC";
export const UserContext=createContext();
export const ChannelContext=createContext();
export default function App() {
return (
<div className="App">
<UserContext.Provider value={'Hello'}>
<ChannelContext.Provider value={'world'}>
<ComponentC/>
</ChannelContext.Provider>
</UserContext.Provider>
</div>
);
}
2.)Now, we can import the context created in the root component to any of the nested component .For that import useContext hook
import React,{useContext} from "react"
ComponentF.js
import {UserContext,ChannelContext} from '../App'
import React,{useContext} from "react"
function ComponentF(){
const user=useContext(UserContext);
const channel=useContext(ChannelContext);
return(
<div>
{user}-{channel}
</div>
);
}
export default ComponentF;
To view whole code source click on this link
Codesand Box link
Give this article a like if you found it helpful and follow me for more articles like this.
This content originally appeared on DEV Community and was authored by Srishti Prasad
Srishti Prasad | Sciencx (2022-07-09T05:59:55+00:00) Guide to React Hook-useContext. Retrieved from https://www.scien.cx/2022/07/09/guide-to-react-hook-usecontext/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.