React useContext() hook introduction 🧗‍♂️

[@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.
//
//
// 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();
}
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(

ComponentA
{`Hello ${user}`}




);
}
export default ComponentA
// ---------- ComponentB ----------
import ComponentC from './ComponentC.jsx';
function ComponentB(){
return(

ComponentB


);
}
export default ComponentB
// ---------- ComponentC ----------
import ComponentD from './ComponentD.jsx';
function ComponentC(){
return(

ComponentC


);
}
export default ComponentC
// ---------- ComponentD ----------
import React, {useContext} from 'react';
import {UserContext} from './ComponentA.jsx';
function ComponentD(){
const user = useContext(UserContext);
return(

ComponentD
{`Bye ${user}`}

);
}
export default ComponentD

[@Harry99-m8i]

bro plz upload every day and always thankful for u

[@rayyanabdulwajid7681]

Make a crud todo in vanilla javascript where we can enter more than 1 value inside a form.

[@lonelydevilcreations]

Please make redux and context API videos

[@-_SleepAndEat_-]

Bro can you do Kali Linux ?

[@ronjohnson123]

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

[@reecenward]

yeah same lol

[@Dark_lord_Dl]

Yep

[@a13519]

The best explaination in youtube about context

[@ChucklesMcGee780]

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

[@valerylouis6747]

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

[@jacksparrow694]

Really the Best explaination of usecontext in youtube❤

[@victoroluwatobi1531]

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

[@timid-techie]

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

[@remember.772]

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

[@baidris]

Best explanation of Context React, Thank you.

[@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 ❣️

[@shreehari2589]

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

[@lateefmushtaq6059]

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

[@aswin9750]

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

[@RamyChenafi]

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

[@JamesTheSuperDev]

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

[@rohansaka2808]

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

[@parsabordbar9844]

Great Job and quick refresher for me thank you man!

[@GN0AGT]

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

[@millad90s]

I saw different video, but you are better than those. you are not in a rush, explain why we need what. thank you

[@MirzaMesinovic]

Absolutely amazing tutorial. Impossible to not understand. Thanks!

[@sanjibkarki9000]

Thank you for simplifying this with very clear example.

[@jawad_youtube]

short, simple, precise

[@monmaka]

I finally understand it. Thanks bro

[@music_spectrum_channel]

It's the best video i have ever seen

[@java_learn6447]

Amazing lecture

[@sebastianlozano7707]

Most of what I know about Javascript is thanks to you! Thanks Bro Code

[@ShashankJ04]

Swear to god I have all notifications on RUclips but everytime u upload a new video I get no notification. Love your videos though!! keep on going.

[@m0slah]

That's a great explanation‚ thank you so useful

[@hananfadah]

Wow thanks a lot! What a great explanation. Truly appreciate your effort.

[@ttsl8922]

the example is intuitive and easy to understand. ty

[@topvibe952]

Best Explanation 🤝❤❤

[@zainashraf259]

Great Explaination.. And Concise also... Liked...

[@mjylove2]

such a amazing explanation

[@MyCodeJourney-wv2oc]

thank you man, so clear and enjoyable
😊😊😊❤❤❤

[@shubhamsonar5689]

love you bro such a super duper easy to understand 🙌

[@PraveenkumarMahalingam]

It is very easy to understand 🎉

[@pastori2672]

i swear everytime im concerned about a concept you make a video about it

[@syedmajid3202]

Thanks for video!

[@Comedy_Center12]

Excellent

[@BishanTamang-rk5ji]

Make 2024 Java course love from Nepal ♥️💓

[@wisdombuiltestate]

this is a great turtoria

[@muammarajohnson5336]

i just became a fan bro. very nice

[@razkoreakpop9805]

Your the best

[@valerylouis6747]

I'm bout to watch this tutorial today. Anything from bro code, I know it's good

[@razkoreakpop9805]

Thank you for uploading video ❤

[@DMZT_dhruv]

you can use eslint react extension
for typing react code faster

[@abhishekjaiswar-n3r]

Finally I got it...❤

[@Itsme-o3v]

Well explained keep it up!

[@ilhamnurutomo6930]

thanks, great explanation

[@animatsuki5345]

really cool! thanks man! yay

[@HarshithramSundararaman]

youre videos are great!

[@otabekmadaminov-z2i]

Thank you bro

[@sfg-2310]

thanks for explanation, but does needs to have 'user={user}' for useContext to work?

[@BroCodez]

You can remove user={user}, I forgot to do that in the demo

[@sfg-2310]

@@BroCodez thank you for letting me know ❤❤

[@TheMarketingMan4U]

Hi,
U wrapped using provider component B in Component A but u why didn't u do the same for component D or C

[@sereneflatun]

🧡💜💚 thank u

[@available2574]

Bro you are hero...

[@ayeshaawan-fq3on]

nice

[@TibaFallah]

Please continue teaching react.. upload new video you are expert in this💔

[@shadow-k3k1g]

Bro Code is perfect Good

[@rishabhkedia9304]

Please make Reactjs projects as well

[@KingOfMadnesss]

Day 1 of asking for an sfml full course (after your done with this course)

[@pratyushkiran8654]

Uff ! That was easy 🔥🔥

[@xySaad]

Why you never use auto complete?

[@natnaelabebe7397]

If anything unclear about any programming language headover brocode, then he will fix it it is his default behavior

[@EmanBung]

Thank you bro code

[@Nova_Software]

Day 1 of asking for a typescript tutorial, a c# with xaml tutorial and a Pygame tutorial

[@NathanWondwossen]

Can you please make a how to redirect to another page tutorial please respond 🙏🙏🙏

[@ahmadyakubuahmad7626]

Bro we want to see your face and say Thank you!

[@shreehari2589]

You can see him on twitch

[@MiniSmith998]

​​@@shreehari2589what's his twitch Id?

[@sunilmehta5237]

but how does a UserContext know that it has to provide a User data, is it by naming ? Please can someone answer this ? The reason I am asking by your example is what if I want to create this context a standalone JS class.

[@nesa6582]

Naming variable UserContext was super confusing. :D

[@togya4]

I wish u talked about it earlier cuz 6 months ago i was so lost ):

[@muntasirhossen9730]

please make a video for nextjs

[@vigneshkh4200]

Bro code can you please upload redux series as well.

[@СергейИванченков-ДляСвоих]

Can i update the value in context from component D so that all consumers would get updated and rerendered new value? I have sibling components, and i need to have one sibling update value in contex so that my other sibling recieved new value.

[@DeadEnd_579]

Hey can u continue Data Structures and Algorithms Playlist on

[@nebojsaknezevic6053]

Can it work in reverse? Make component C provider and then have componentA consumer?

[@abdullahabada2222]

Can i use usecontext for the same level for component that component a , b , c, d at the same degree of level not one is parent or child to other

[@arshadahamed988]

Can we have more values in single usecontext hook??

[@santoshchulakimath]

6:39 for my reference p1-p2

[@raitaskeen]

Bro can u make a lecture on RUST...!

[@lonelydevilcreations]

Please create redux and context API tutorial

[@hashirowais6475]

how many videos are left till this series is over?

[@BroCodez]

Why, do you not like it?

[@hashirowais6475]

@@BroCodez No I love it. I just want to know much is left before I can start using react to create my own applications :)

[@RhemaOshogwe]

Please I need help,
I'm using php(xampp)
I can't find the php.exe, I've deleted and reinstalled many times I still can't find it, I just need to know if I can use PHP in vscode without it?

[@RhemaOshogwe]

The same error it showed on your vscode when starting PHP that's what it's still showing in my own, but I cant find the php.exe

[@capslock3250]

Personally, I find useContext to be the most confusing hook.

[@ish7862]

🫡🫡🫡