Learn React Hooks: useContext - Simply Explained!

Подписаться 82 тыс.

Просмотров 121 тыс.

50% 1

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!

Опубликовано:

24 май 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 242

@cosdensolutions 2 месяца назад

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 4 месяца назад

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 3 месяца назад

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

@shubhankarvalimbe5286 7 месяцев назад

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 7 месяцев назад

makes me happy to hear!

@mikoajkulczynski5213 7 месяцев назад

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

@cosdensolutions 7 месяцев назад

thank you for the kind words!

@marshallfungai3033 5 месяцев назад

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 2 месяца назад

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 6 месяцев назад

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

@jijocleetus 4 месяца назад

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

@Chris-by8tg 4 месяца назад

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

@user-sy5fd7kn8w Месяц назад

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

@AntNZ Год назад

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

@cosdensolutions Год назад

Glad you enjoyed it! 🤙

@shawn.builds Месяц назад

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

@_romeopeter 16 дней назад

This was straight forward. Thank you for throwing in the extra error handling method as well 🔥

@soduno596 12 дней назад

you where one of the only youtubers who actually got me to subscribe to your channel. Nice way of implementing the idea 😃. And fantastic tutorials, crystal clear.

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

@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 5 месяцев назад

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

@user-gm3lg8gp3m 10 месяцев назад

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

@cosdensolutions 10 месяцев назад

🤙

@rmc1579 5 месяцев назад

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

@garudaphoenix5479 10 месяцев назад

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 10 месяцев назад

Thanks a lot 🤙

@franbrankovic3617 8 месяцев назад

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

@antimrevapati8992 3 месяца назад

Great Explanation, Thank you!

@AhmedHuzain 5 месяцев назад

"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!

@ThomasKanzig 8 месяцев назад

Amazing tutorial. Thanks a lot.

@YisneySoto 8 месяцев назад

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 8 месяцев назад

glad to hear it!

@sudiptobose8296 2 месяца назад

Fantastic tutorial. I really appreciate it. 😊

@poornasaipilla1620 3 месяца назад

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

@Pareshbpatel 7 месяцев назад

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

@sub_in01 9 месяцев назад

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 9 месяцев назад

thanks for the kind words! 🤙

@XXlikeabauss 10 месяцев назад

Really helpful video, thank you so much!

@brNoMundo123 3 месяца назад

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

@deshannawarathna6283 5 месяцев назад

Thank you man. That is good explanation

@thebeastsclips 6 месяцев назад

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

@sathirabandara7981 4 месяца назад

Great job man. its very helpful !!

@israelkayaba6002 6 месяцев назад

Thanks bro, much appreciated !

@Teddyrobinson 4 месяца назад

Another great tutorial thanks so much!

@shivasai7707 6 дней назад

great explaination on useContext

@santiagovelezsaffon Месяц назад

Very well explained !!

@samahgad241 5 месяцев назад

Realy great explanation,thank you

@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 11 месяцев назад

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

@cosdensolutions 11 месяцев назад

🤙

@ooorayooonyoooo 10 месяцев назад

A really underrated channel, well done bro! ⚡❤

@marceloleoncaceres6826 4 месяца назад

Great video, thanks for sharing your time and knowledge,

@tokaqarcivadze5825 7 месяцев назад

the way you explain react is the best!

@awasum 3 месяца назад

Thank you very much. Good content

@omkarjagtap2212 3 месяца назад

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

@user-ms4cs3cb4w 5 месяцев назад

Thanks it was very helpful

@HerlonCosta 6 месяцев назад

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

@codehustler8582 2 месяца назад

Amazing Channel for Learning React

@jouebien 27 дней назад

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.

@lordkonadukweku6965 6 месяцев назад

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

@sup_nim 9 месяцев назад

great explaination thank you bro!

@simplebutcorrect6176 8 месяцев назад

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

@UnfinishedYara 4 месяца назад

Thanks man! Crystal clear now!

@juststudying1019 4 месяца назад

Amazing channel, thanks.

@user-el9ui5jk5m 2 месяца назад

I literally subscribed after seeing your message in the Video

@vivekkumar-pc1xy 5 месяцев назад

Crystal Clear... Thanks

@theppiwatkomolwat4429 6 месяцев назад

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

@cosdensolutions 6 месяцев назад

☺️

@cypherop2608 5 месяцев назад

you made it soooooo easy to understand

@Shaheer-xs5os 10 месяцев назад

That was such an awesome explanation 👍

@cosdensolutions 10 месяцев назад

Thanks 🤙

@myothiha1168 10 месяцев назад

best explanation ever!🤩

@RyS29 6 месяцев назад

Great content, thank you!

@mgx49 2 месяца назад

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

@glenmccallum7051 8 месяцев назад

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

@cosdensolutions 8 месяцев назад

glad it helped!

@theGameThrough 10 месяцев назад

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

@syedayanata9765 8 месяцев назад

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

@cosdensolutions 8 месяцев назад

you got this

@PravinsPhotos 4 месяца назад

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

@anhmap9055 День назад

ok lắm anh trai đẹp zai ơi, em mới học mót không học chính thức, ban đầu em đi móc A => B => C => D, bây giờ thì móc A => D )))

@Martin-xf8be 5 месяцев назад

That subscribe intro you did made me subscribe. Genius.

@Vishal360 8 месяцев назад

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

@MarksmanVallecillo 8 месяцев назад

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

@leonardmbibi8013 8 месяцев назад

Top notch! You're the man

@suvakshaacharya6900 2 месяца назад

thanks . helped a lot

@user-wq9xz9yc7c 6 месяцев назад

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

@cosdensolutions 6 месяцев назад

Working on adding translated captions to all videos soon!

@yusha790 19 дней назад

You're the best man

@safareesamuels4674 6 месяцев назад

Home of React well explained Tutorials

@abdoseadaa 4 месяца назад

i put like b4 watching your videos :) legend

@Atomatiz 5 месяцев назад

Cosden. I love you bros 😉

@admasterefe4340 Месяц назад

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

@ihebbenaicha1353 Год назад

please keep it up with more hooks and thank you !

@cosdensolutions Год назад

Will do!

@rasikakshirsagar5563 4 месяца назад

Thank you bro!

@shekhtausif2811 Год назад

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

@cosdensolutions Год назад

Will do!

@Fleischmann773 8 месяцев назад

Great example!!!

@antoninosartori 7 месяцев назад

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 5 месяцев назад

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

@brunopagno 7 месяцев назад

Nice video!

@MRNani-rw6td 20 дней назад

Thank for this

@mai.krishnahoon 3 месяца назад

Thanks from india..

@Bilo_7 10 месяцев назад

I made an instant subscription 👍

@cosdensolutions 10 месяцев назад

🤙

@mahdighasemi9518 9 месяцев назад

Thanks a lot.

@nogafouz2174 5 месяцев назад

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

@fun2rideadventure 10 месяцев назад

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

@user-dm3sf9mk2o 8 месяцев назад

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

@cosdensolutions 8 месяцев назад

sure!

@user-dm3sf9mk2o 7 месяцев назад

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

@mark-broomfield 6 месяцев назад

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

@cosdensolutions 6 месяцев назад

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

@drrd5145 3 дня назад

Nice videos! It is possible to change/set Context before going to another screen (using a Link or Pressable component and Expo Router)? This example is great to set a value and call a component but not to move to another page, I have a JSON object that I receive in the Home page that contains info used by the rest of the App. I want to set the context there and use that info in other pages in the App. Thx!

@niconel7659 7 месяцев назад

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

@Atul_25 Месяц назад

Thanks for making in ts

@muhammadrehan5722 7 месяцев назад

now i subscribed ;)

@mDHARYL 3 месяца назад

Thanks 🙏😊

@shubhamshekhar23 5 месяцев назад

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 🥸