Scribd
Upload
22 views

41 - Usecontext Hook

React Context allows state to be shared globally between components without having to pass props down through each level of nested components. Context solves the problem of "prop drilling" where state needs to be passed from parent to child and then to deeper child components. The state is instead held by the highest level component and accessed by lower components through Context.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views

41 - Usecontext Hook

React Context allows state to be shared globally between components without having to pass props down through each level of nested components. Context solves the problem of "prop drilling" where state needs to be passed from parent to child and then to deeper child components. The state is instead held by the highest level component and accessed by lower components through Context.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

PART-41

useContext
Hook
PRESENTER: MOHAMMAD ADIL
REACT
Humble Request REACT

Techno Verse YT

Heavenly Delicious
REACT

APP Component Name = Adil

Props

A
REACT
APP Component Name = Adil

Props

A
Props

B
APP Component Name = Adil REACT

Props

A
Prop Drilling
Props

B
Props

useContext C
React Context REACT

• React Context is a way to manage state globally.


• It can be used together with the useState Hook to share state between
deeply nested components more easily than with useState alone.
The Problem REACT

• State should be held by the highest parent component in the stack that
requires access to the state.
• To do this without Context, we will need to pass the state as "props"
through each nested component. This is called "prop drilling".
function Component1() { function Component2({ user }) {
const [user, setUser] = useState(“Adil"); return (
<>
return ( <h1>Component 2</h1>
<> <Component3 user={user} />
<h1>{`Hello ${user}!`}</h1> </>
<Component2 user={user} /> );
</> }
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}

You might also like