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.

[@HR-pz7ts]

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

[@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!

[@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!

[@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.

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

[@jijocleetus]

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

[@AntNZ]

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

[@cosdensolutions]

Glad you enjoyed it! 🤙

[@Chris-by8tg]

This was the clearest explanation I've seen. 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!

[@user-sy5fd7kn8w]

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

[@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 🤙

[@user-gm3lg8gp3m]

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

[@cosdensolutions]

🤙

[@wekesirken6961]

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

[@franbrankovic3617]

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

[@vampirekabir]

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

[@cosdensolutions]

🤙

[@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!

[@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! 🤙

[@shawn.builds]

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

[@XXlikeabauss]

Really helpful video, thank you so much!

[@kwasiezor1630]

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

[@cosdensolutions]

Glad you found it useful!

[@kwasiezor1630]

Yes Indeed. Keep it up 👏

[@rmc1579]

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

[@ThomasKanzig]

Amazing tutorial. Thanks a lot.

[@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.

[@ooorayooonyoooo]

A really underrated channel, well done bro! ⚡❤

[@Shaheer-xs5os]

That was such an awesome explanation 👍

[@cosdensolutions]

Thanks 🤙

[@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!

[@syedayanata9765]

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

[@cosdensolutions]

you got this

[@simplebutcorrect6176]

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

[@joshuaagudelo29]

Well explained!

[@lordkonadukweku6965]

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

[@leonardmbibi8013]

Top notch! You're the man

[@theppiwatkomolwat4429]

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

[@cosdensolutions]

☺️

[@mgx49]

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

[@glenmccallum7051]

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

[@cosdensolutions]

glad it helped!

[@sup_nim]

great explaination thank you bro!

[@myothiha1168]

best explanation ever!🤩

[@omkarjagtap2212]

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

[@HerlonCosta]

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

[@sudiptobose8296]

Fantastic tutorial. I really appreciate it. 😊

[@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.

[@antimrevapati8992]

Great Explanation, Thank you!

[@tokaqarcivadze5825]

the way you explain react is the best!

[@cypherop2608]

you made it soooooo easy to understand

[@Teddyrobinson]

Another great tutorial thanks so much!

[@brNoMundo123]

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

[@Fleischmann773]

Great example!!!

[@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.

[@UnfinishedYara]

Thanks man! Crystal clear now!

[@ihebbenaicha1353]

please keep it up with more hooks and thank you !

[@cosdensolutions]

Will do!

[@samahgad241]

Realy great explanation,thank you

[@user-el9ui5jk5m]

I literally subscribed after seeing your message in the Video

[@Martin-xf8be]

That subscribe intro you did made me subscribe. Genius.

[@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!

[@vivekkumar-pc1xy]

Crystal Clear... Thanks

[@safareesamuels4674]

Home of React well explained Tutorials

[@shekhtausif2811]

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

[@cosdensolutions]

Will do!

[@Pareshbpatel]

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

[@Vishal360]

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

[@deshannawarathna6283]

Thank you man. That is good explanation

[@sathirabandara7981]

Great job man. its very helpful !!

[@marceloleoncaceres6826]

Great video, thanks for sharing your time and knowledge,

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

[@poornasaipilla1620]

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

[@israelkayaba6002]

Thanks bro, much appreciated !

[@codehustler8582]

Amazing Channel for Learning React

[@MarksmanVallecillo]

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

[@RyS29]

Great content, thank you!

[@PravinsPhotos]

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

[@dobindahoria4633]

this is gold

[@awasum]

Thank you very much. Good content

[@user-ms4cs3cb4w]

Thanks it was very helpful

[@suvakshaacharya6900]

thanks . helped a lot

[@rasikakshirsagar5563]

Thank you bro!

[@nogafouz2174]

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

[@Bilo_7]

I made an instant subscription 👍

[@cosdensolutions]

🤙

[@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!!!

[@juststudying1019]

Amazing channel, thanks.

[@admasterefe4340]

GOD level explanation. I want everyone to subscribe to this channel. Too bad one can't give two likes.

[@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.

[@qweqw1359]

Nice 👍

[@mahdighasemi9518]

Thanks a lot.

[@thesnowqueen98]

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

[@mai.krishnahoon]

Thanks from india..

[@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!

[@nabilachehlafekir8577]

thank you

[@fun2rideadventure]

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

[@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 🥸

[@brunopagno]

Nice video!

[@abdulbasir8740]

Hey, thank you! are you using VIM?

[@Atomatiz]

Cosden. I love you bros 😉

[@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!

[@abdoseadaa]

i put like b4 watching your videos :) legend

[@niconel7659]

Thanks for the reminder to subscribe. Guilty as charged, but subscribed now.

[@Atul_25]

Thanks for making in ts

[@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.

[@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!

[@user-sm3rx2uw7r]

Please make a zustand tutorial as well

[@cosdensolutions]

It's on the list!