Learn useContext In 13 Minutes

🚨 IMPORTANT:

Use code KYLE for an additional $50

In this video I cover everything you need to know about the useContext hook. I go over all the main use cases for useContext as well as many common mistakes that developers make. This is part of a series of React videos where I cover all the important hooks in React.

📚 Materials/References:

🧠 Concepts Covered:

- How to use hooks in React
- How to use context values in React function components
- How to use the useContext hook

🌎 Find Me Here:

#ReactJs #WDS #useContext

[dimitrioszygolanis]

In order to simplify it, I think you could create an object, like const values = { darkTheme, toggle } and pass both values inside the ThemeContext.Provider, in order to avoid creating 2 providers.

[femaledeer]

These 13 minute videos end up taking me 2 hours to go through

[piyush]

Took me like 2 hours and 4 breaks to understand the refactor that you did in the separate file. I also didn't knew that useContext(ThemeProvider) was just like a consumer for function based components. Your tutorials are so amazing. What a neat way to write code, keep making good videos!

[umafly]

Not going to lie this is probably the first time I can't follow you without rewinding. The pace is very high in this one, nothing like the other hooks

[KevinVandyTech]

After watching this video, I refactored one of my side projects, and it's so much cleaner.

[TheRealAfroRick]

I think the hardest part of this is that you are doing it with themes. If you were to simply expose an object or something and have it available in all of the children, it might be a little bit clearer. Using the theme is actually muddying up your demo.

[nanonkay]

I think you can pass in not only state but also functions in the value attribute of the provider like this:

<YourComponent.Provider value={state, function}>
{children}
</YourComponent.Provider>

...and then just destructor the two depending on what you need in a particular component.

[lonniesmith]

As a react beginner I'm sure this is a great explanation for someone with a little more experience. As a beginner I found this example to much. Passing a variable down such as a name or number would have been a great start IMO. I hope this is constructive criticism. You channel is amazing!

[timothylander]

After watching the entire video once, then duplicating the project during a second viewing, I was able to understand the concepts well enough to add additional context variables and new sibling components that can easily communicate amongst themselves. Your explanations, demos, and walk-throughs are so clear, concise, and to-the-point that with some study, the concepts really begin to sink in. Thank you!

[LieberLois]

Great Video about Context!
Im just disagreeing with creating multiple Contexts for a variable and its Setter function! You can just pass both as an object as the context value :)

[AlldayIshid]

I love this guy so much but he's persona is what I imagine an alien would create if they were trying to build a human

[brijspy]

Thanks a lot kyle :) I have seen so many videos of useContext hook but never seen this kind of a structure which is awesome to maintain and scale. This is gold.

[briandesign]

just started learning React, so this is good to see

[heathenfire]

Great video. I just started learning about useReducer and useContext. So perfect timing!!

[smdude]

I can't believe how easy it is to understand it the way you explained it. Using your vids as a refresher (haven't done react in a while) and it's been super helpful for my job search. Not sure you're gonna read this but THANK YOU. Will take your full course

[mrdoner]

The most informative channel I have found for web dev. Thanks again for clearing up another complicated topic so concisely.

[varundoshi]

This channel literally has everything that I search for. Can't thank you enough for sharing your knowledge!

[zevspitz]

A gentle introduction to useContext and context in general. Two points:
As others have noted, I would have a single provider for both the darkTheme and toggleTheme values.
Also, I found it confusing that the button now has to live within the FunctionComponent. I'm not sure which is better: wrap the App component in ThemeProvider one level up, or create an intermediate component to hold the button and the FunctionComponent.

[pesovatech]

Bro you did a refractor and scattered my head on understanding the first one, simplified refractor ended up hardening the whole thing 😭

I had to stop watching and go on with the first method, thanks for the Video

[bigmicki]

Good concise video. One important thing to point out for people wanting to throw redux out in favor of context is that dont think of react context as a replacement for redux, as it is a very expensive operation for react for high frequency updates with react context. For that use redux. for low frequency updates like selecting a locale for you app and something similar, react context is perfect for that use case. This is important as people tend to go crazy after learning react hooks and start refactoring entire code base to this hot new tech. Find the sweet spot.