React js use contexts and useContext 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