Learn React Hooks: useContext - Simply Explained!

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we will learn about React hooks, starting with useContext. This powerful React hook will allow you to manage your state efficiently without having to pass an enormous amount of props around (prop drilling). You will learn how to identify when to use the React Context API, how to use createContext to create the context, create a custom hook to handle undefined values, and finally use the context in any component to get access to the data.
In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useContext React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!

[@cosdensolutions]

Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

[@GeraldPajulas]

Thank you. I've been learning React for about 4 days and I was confused about the useContext and createContext, but your video explains it well. Thank you.

[@shubhankarvalimbe5286]

Great tutorial! I was so confused about how Context works, every other creator complicates it too much. Thank you for simplifying it. Just subbed!

[@cosdensolutions]

makes me happy to hear!

[@HR-pz7ts]

It's amazing you also taught how to deal with problems and showed proper way to code and handle potential errors.

[@mikoajkulczynski5213]

Thank you for the content. You have the gift to talk about coding in a simple way.

[@cosdensolutions]

thank you for the kind words!

[@jijocleetus]

Great one with context, i like the way you handled the undefined scenario. Thanks for the tutorial.

[@osmankain1508]

Wow you're a perfect teacher and programmer thanks for the time that you spent for this amazing content

[@camilotorresf1]

This was a really good explanation. I took notes and later was able to replicate a similar example. I now understand the useContext hook a lot better. I'm just starting with React and this is really my first application, although I work with a team in a project that already have a lot of react. I expect to become more proficient in React to really be able to work on that project. Keep the good work, I hope you get a lot of subscribers soon.

[@cosdensolutions]

Really happy to hear that dude! You're going to do great ☺️ thank you for the kind words!

[@lordkonadukweku6965]

@@cosdensolutions please when are going to do a video on HOC

[@Chris-by8tg]

This was the clearest explanation I've seen. Thank you!

[@marshallfungai3033]

Thanks man, been watching your videos for the last 7 days. Practicing for mid-senior dev job... Now I feel like a junior dev 😁, because of all the content I learnt. I "was" a "I can do it, but I can not explain it" person. But the upside is now I "REALLY" know what to do. Just subscribed. And we need more videos on testing.

[@user-gm3lg8gp3m]

I subscribed!! This is a great way to explain the concept + thanks for adding the error handling part 👍

[@cosdensolutions]

🤙

[@AntNZ]

Wow! Such a excellent explanation and with examples too. Well done 👏👏👏👏

[@cosdensolutions]

Glad you enjoyed it! 🤙

[@user-sy5fd7kn8w]

Hands down best explanation of the topic on the tube. Thank you!

[@jay-kv6wn]

I hope your videos go viral soon like they should. You are doing a great work with your explanations

[@cosdensolutions]

Haha imagine going viral for React 😅 would love it!

[@wekesirken6961]

That was some good explanation, you made contexts seem obvious...Appreciated

[@shawn.builds]

been loving the react tutorials man! dont think anyones ever explained context so simply :)

[@XXlikeabauss]

Really helpful video, thank you so much!

[@ThomasKanzig]

Amazing tutorial. Thanks a lot.

[@garudaphoenix5479]

Thanks for this great and clear explanation with a lot more edges. Hope you will get 1 million subs soon. Tbh, You deserve it.

[@cosdensolutions]

Thanks a lot 🤙

[@sub_in01]

Bro I really love your content and I learn a lot from you, don't worry about subscribers, they will ultimately come to you as your way of explaining is so very good. Keep uploading contents.

[@cosdensolutions]

thanks for the kind words! 🤙

[@YisneySoto]

Great, thanks. It's my first Context video and I think I got it at the first time because it's so well explained, of course having used Redux before makes this easier to understand.

[@cosdensolutions]

glad to hear it!

[@kwasiezor1630]

Thanks for the video bro. Simplified explanation always makes understanding better 😊

[@cosdensolutions]

Glad you found it useful!

[@kwasiezor1630]

Yes Indeed. Keep it up 👏

[@vampirekabir]

trying to get a grasp of it,nobody taught like u did,i finally get it now ❤❤

[@cosdensolutions]

🤙

[@Shaheer-xs5os]

That was such an awesome explanation 👍

[@cosdensolutions]

Thanks 🤙

[@simplebutcorrect6176]

Bro I love the way that you explain keep it up. Subscribed❤

[@joshuaagudelo29]

Well explained!

[@rmc1579]

great explanation. I was a little bit confuse when using context and how to implement them.

[@ooorayooonyoooo]

A really underrated channel, well done bro! ⚡❤

[@franbrankovic3617]

After this video you really don't need to watch another video about react useContext. This was excellent video.

[@sup_nim]

great explaination thank you bro!

[@mchisolm0]

Definitely appreciate your attention to detail and have earned my sub. You helped me understand how I was having trouble with a boilerplate I use that has a useState inside a useEffect. I understand *what* the problem is now (thank you for that video), but I can't figure out what I need to learn to solve it. Thanks for at least helping me get closer.

[@sudiptobose8296]

Fantastic tutorial. I really appreciate it. 😊

[@leonardmbibi8013]

Top notch! You're the man

[@glenmccallum7051]

Thanks a lot, this was really helpful. Really great video and great channel

[@cosdensolutions]

glad it helped!

[@AhmedHuzain]

"If you watch this hook video, you'll probably never need to watch another" This is so true! You explain it so well. Thank you!

[@antimrevapati8992]

Great Explanation, Thank you!

[@syedayanata9765]

I watched many videos and still did not understand context but this video helped me a lot.

[@cosdensolutions]

you got this

[@Teddyrobinson]

Another great tutorial thanks so much!

[@user-dm3sf9mk2o]

This was a really good explanation. Would you consider doing a video about useContext in regards to forms?

[@cosdensolutions]

sure!

[@user-dm3sf9mk2o]

@@cosdensolutionsI get stuck on passing input content to the page. Trying different ways without too much success.

[@sathirabandara7981]

Great job man. its very helpful !!

[@UnfinishedYara]

Thanks man! Crystal clear now!

[@myothiha1168]

best explanation ever!🤩

[@thebeastsclips]

useContext is a great alternative for a bunch of prop drilling with a bunch of useStates as well in the child component as well.

[@Vishal360]

loved ur react tuts.... 🔥🔥🔥🔥🔥🔥🔥🔥

[@deshannawarathna6283]

Thank you man. That is good explanation

[@lordkonadukweku6965]

Top-notch explanation. Manifesting 100k subscribers by end of this year

[@Fleischmann773]

Great example!!!

[@mgx49]

No doubt I won't need to watch another React Context API video! [Subscribed]

[@samahgad241]

Realy great explanation,thank you

[@HerlonCosta]

I reall like this explanation. You're very good, god bless you!

[@vivekkumar-pc1xy]

Crystal Clear... Thanks

[@marceloleoncaceres6826]

Great video, thanks for sharing your time and knowledge,

[@poornasaipilla1620]

Really use full video thanks for doing ... extending my great full and encouragement .... keep doing well..

[@israelkayaba6002]

Thanks bro, much appreciated !

[@Martin-xf8be]

That subscribe intro you did made me subscribe. Genius.

[@tokaqarcivadze5825]

the way you explain react is the best!

[@theppiwatkomolwat4429]

1:31 This part of the code worked; I have now subscribed!

[@cosdensolutions]

☺️

[@cypherop2608]

you made it soooooo easy to understand

[@omkarjagtap2212]

man, awosome video crystel clear concepts and learned how to write a more safe code(in the pov for debugging)

[@antoninosartori]

And what if User comes from a fetch? Do you put in on the custom hook? How would you handle errors? Thanks for the video

[@hanguyenmanh2459]

If user come from server state, don't throw error in custom hook, just return user.

[@ihebbenaicha1353]

please keep it up with more hooks and thank you !

[@cosdensolutions]

Will do!

[@user-ms4cs3cb4w]

Thanks it was very helpful

[@RyS29]

Great content, thank you!

[@theGameThrough]

It would be suggested to put some console log and also the UI just to make it more clear would be a lot helpful too thanks

[@dobindahoria4633]

this is gold

[@awasum]

Thank you very much. Good content

[@rasikakshirsagar5563]

Thank you bro!

[@thesnowqueen98]

Could you tell the name of the VS Code Theme you are using?

[@qweqw1359]

Nice 👍

[@Pareshbpatel]

Context API with a custom hook, so well explained. Thank you. {2023-10-16}

[@mahdighasemi9518]

Thanks a lot.

[@user-el9ui5jk5m]

I literally subscribed after seeing your message in the Video

[@brNoMundo123]

Sou desenvolvedora Júnior e seus vídeos estão me ajudando muito a me desenvolver 🚀

[@MarksmanVallecillo]

Thanks, man very good video. 10 Stars ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

[@suvakshaacharya6900]

thanks . helped a lot

[@nabilachehlafekir8577]

thank you

[@jouebien]

grouse wrapping the context in a hook. You can build up the provider with state & mutators and pass that to the value of the provider. There's no need to wrap the context with hook jank to extend the context -> with a wrapped hook A) you're not enforce access & mutations B) you also have an extra shit tonne of renders as the hook runs through state changes in every component C) you remove the useContext which hides the fact the component is consuming global/shared state.

[@juststudying1019]

Amazing channel, thanks.

[@nogafouz2174]

realy thank you but i have a question please which better using context api or redux tookit

[@codehustler8582]

Amazing Channel for Learning React

[@safareesamuels4674]

Home of React well explained Tutorials

[@user-wq9xz9yc7c]

I speak another language, but I'm happy to find this video. Thanks!

[@cosdensolutions]

Working on adding translated captions to all videos soon!

[@PravinsPhotos]

I really did subscribe at 1:57...good one there😂

[@Bilo_7]

I made an instant subscription 👍

[@cosdensolutions]

🤙

[@abdoseadaa]

i put like b4 watching your videos :) legend

[@shekhtausif2811]

Just make more videos like this on react plz you explain really well

[@cosdensolutions]

Will do!

[@mark-broomfield]

Great tutorial thanks. My subwoofer got a serious workout every time you banged the mic though :-)

[@cosdensolutions]

LOL 😂 it gets better in later videos I promise!!!

[@fun2rideadventure]

... done ... subscribed :) !!!

[@ask43242flight]

The code in video only handles either normal or undefined cases. Is it true that we don't need to handle the null case?

[@cosdensolutions]

in this case you don't, because you define your context as `undefined` initially, then it gets set to a value. So it will be either value or undefined, never null

[@Atomatiz]

Cosden. I love you bros 😉

[@shubhamshekhar23]

Hi Cosden, Can you please also explain how does changing variable in a Context can cause rendering of the whole tree inside. I had created a global conttext and provided in the root of the App. Now, A deeply nested component changes the var in this context but I can see that the whole app is getting rendered (but that deeply nested component consuming that context should rerender right?) Any help and clarification is much appreciated. Thanks 🥸

[@deepakkashyap6538]

I have a question in my mind, which is what would happen if a developer uses this custom hook above the provider component i.e a component which is not a child of the provider , how to add exception or error message?

[@cosdensolutions]

I talk about this in the video! Rewatch it and pay attention!

[@brunopagno]

Nice video!

[@abdulbasir8740]

Hey, thank you! are you using VIM?

[@user-lg2xl1ik9k]

The best video about useContext! Your explanation is super clear and easy to follow, thank you so much! And, I found your import seems to have an alias like @page/../../../dashboard.tsx. Can you make a video to share how to set it up? I've been looking for how to setup path alias in React for a long time.

[@cosdensolutions]

I have a short on it actually!

[@satadhi]

Great explaination ! If I may ask can I get the github link or the code used for the example. Thanks a lot

[@cosdensolutions]

it's in the description!

[@gentlemanjack4083]

I have a question. in line 8 of context.ts file we are having user = useContext(DashboardContext). How exactly this works behind the scenes that in this place we are able to get actually the user value passed in the Dashboard.Provider ?

[@cosdensolutions]

yes that's exactly it!

[@24pratikbhagwat68]

Hey bro what's ur theme name of vs code it looks very warm for eys please tell the name and the video was really great

[@cosdensolutions]

material theme darker

[@felippenvieira]

Cosden, for example, if we are using JWT authentication, could this approach be replaced by Server Action? I mean, I have a middleware checking if some route is being used. If it's being used, it will check if the user is logged in by reading the authentication cookie. If the answer is no, the middleware will redirect the user to the login page, otherwise it will allow the user to access the route. Also, the server action will do the job of caching the authentication, and we can have access to the user action. With this approach, can we get ride of the useContext?

[@cosdensolutions]

yeah in that case you could!

[@sumitmondal7717]

what theme you use in vs code please reply

[@cosdensolutions]

material theme darker