In this presentation I have talked about react hooks and then I have talked about context hook

1. Piyush Jamwal
useContext Hook
React js
Youtube video: https://youtu.be/eVFkFN5S43k
Subscribe my channel

2. Hooks ?
Hooks are special functions in functional react components, starting with the
pre
fi
x ‘use’.
These functions are analogous to various methods provided by react class
components
For example: we have useE
ff
ect hook which can mimic various react class
component life cycles like componentDidMount, componentDidUpdate.
We have useState analogous to react class component States.

3. Without useContext Hook
component 2
component 1
Props
component 3
component 4
Props
Props
function Component2(props) {
return <Component3 text={props.text} />;
}
function Component1(props) {
return <Component2 text={props.text} />;
}
function Component3(props) {
return <Component4 text={props.text} />;
}
function Component4(props) {
return <input type="text" value=
{props.text} />
}

4. Using useContext Hook
component 2
component 1
component 3
component 4
Context Provider Component
<contextObject.Provider value={<input
type="text" value={text}></input>}>
<Component1 />
</contextObject.Provider>
const value = React.useContext(contextObject);
<contextObject.Consumer>
{value=> <input type="text"
value={value}></input>}
</contextObject.Consumer>
For Consuming the data there are two methods

5. Thank you
Please subscribe Growing Scientist and like the video