React useContext() hook introduction 🧗‍♂️

#reactjs #tutorial #course

00:00:00 intro
00:00:13 setup
00:04:39 props
00:06:01 prop drilling
00:06:17 useContext
00:06:27 Provider Component
00:08:28 Consumer Components
00:10:11 multiple consumer components
00:11:10 conclusion

// useContext() = React Hook that allows you to share values
// between multiple levels of components
// without passing props through each level

[BroCodez]

// useContext() = React Hook that allows you to share values
// between multiple levels of components
// without passing props through each level

// PROVIDER COMPONENT
// 1. import {createContext} from 'react';
// 2. export const MyContext = createContext();
// 3. <MyContext.Provider value={value}>
// <Child />
// </MyContext.Provider>

// CONSUMER COMPONENTS
// 1. import React, { useContext } from 'react';
// import { MyContext } from './ComponentA';
// 2. const value = useContext(MyContext);

// CSS
.box{
border: 3px solid;
padding: 25px;
}

// App
import ComponentA from './ComponentA.jsx';

import React from 'react';

function App() {
return(<ComponentA />);
}
export default App;

// ComponentA
import React, {useState, createContext} from 'react';
import ComponentB from './ComponentB.jsx';

export const UserContext = createContext();

function ComponentA(){

const [user, setUser] = useState("BroCode");

return(
<div className="box">
<h1>ComponentA</h1>
<h2>{`Hello ${user}`}</h2>
<UserContext.Provider value={user}>
<ComponentB />
</UserContext.Provider>
</div>
);
}
export default ComponentA

// ComponentB
import ComponentC from './ComponentC.jsx';

function ComponentB(){

return(
<div className="box">
<h1>ComponentB</h1>
<ComponentC />
</div>
);
}
export default ComponentB

// ComponentC
import ComponentD from './ComponentD.jsx';

function ComponentC(){

return(
<div className="box">
<h1>ComponentC</h1>
<ComponentD />
</div>
);
}
export default ComponentC

// ComponentD
import React, {useContext} from 'react';
import {UserContext} from './ComponentA.jsx';

function ComponentD(){

const user = useContext(UserContext);

return(
<div className="box">
<h1>ComponentD</h1>
<h2>{`Bye ${user}`}</h2>
</div>
);
}
export default ComponentD

[ronjohnson]

What a great explanation! Watched numerous videos before this on useContext & still struggled to understand. I then watch one of your videos & instantly understood! Great work

[a]

The best explaination in youtube about context

[ChucklesMcGee]

thanks for making this. I've been so confused by useContext, after a course and quite a few videos, until i found this.

[valerylouis]

Such a simple and easy to understand tutorial. I've watched all the tutorials he has on react, waiting on him to release new ones

[victoroluwatobi]

This is the best explanation so far, easy to comprend. You just gained a subscriber ❤🎉

[shreehari]

Yeah no one could have explained it better than you, I hope you will release full react course soon, eagerly waiting for it

[timid-techie]

I literally struggled with this concept before now, thanks bro for this example. ❤❤❤❤

[parsabordbar]

Great Job and quick refresher for me thank you man!

[GNAGT]

You're trying so hard why don't you enable funds in your videos you saves a lot of our money why don't you just benefit a little bit

[AmswonAbrahamDeSodanoDorsainvi]

I do really Love this guy. You do know how to make people understand. You are a life savior Bro May God Jesus Christ bless you

[JamesTheSuperDev]

Short and sweet. Exactly what I have been looking for.

[aswin]

Now i understand useContext is a very simple concept. Thank you for you explanation

[MirzaMesinovic]

Absolutely amazing tutorial. Impossible to not understand. Thanks!

[dbfoofe]

I spent a whole week on the Context API, and you explained it in 11 minutes.

[sanjibkarki]

Thank you for simplifying this with very clear example.

[daverzeacademy]

I don't know how you make complicated concepts look so simple.

I hope you see this comment one day. I just want to say thank you ❣️

[lateefmushtaq]

The best explaination fro useContext, (I came from udemy course, then few other videos where they explain it as a big thing ). Thankyou :)

[remember.]

I subscribed ur channel today cause u deserve it, u explain with simple terms that's what we need, for juniors first they should understand how it works then they will work with confident

[rohansaka]

Your voice is rock solid like a Hollywood hero indeed you are my technical hero and guru