Learn useContext In 13 Minutes

Why do we need a 2 components (theme context. Provider and theme update context. Provider) inside a theme context. Js?
Cannot we use just one? Why?

Don't watch this video if you don't know nothing about the useContext. It will make you so confused.

i am following the full playlist of hooks and i have no idea how the level suddenly up like that drastictally

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.

Hello, Genius bro I love your way of working with JS.
From Afghanistan .
Thank you so much.

why did you need to create 2 context providers, wasn't it possible to pass darktheme and a toggler function though one context provider in the value?

You're great :-) Excellent, clear explanation, and I was able to put it to use right away.

Whenever I need a quick,simplified overview of anything programming, KYLE is my guy, his job is to SIMPLIFY THE WEB FOR ME

isn't useUpdateTheme context and overkill ?

what's the point of putting the implementation of dark theme in Functional Component .
Shouldn't the background colour be passed on to wrapped components from the provider

I literally find redux easier to wrap my head around. It's more difficult to verbose but much more logical and easier to understand.

Thank you very much for the Video. I think it is still quite ugly with the two wrapping provider... Vue have got definitly cleaner solutions.

You have great content, but please stop repeating "my name is and ...." in the introduction every video.
I'm thinking about making a chrome extension to auto-skip first minute of any video I open from your channel

Btw you could've used a single custom hook for everything here. You could have passed the context as an object like themeData = {darkTheme: darkTheme, toggleTheme: toggleTheme} and then use them in there like ThemeContext.darkTheme and ThemeContext.toggleTheme instead of wrapping the child with two providers.

One provider but carrying the data with in an object and you can even call the function using that.

perfect explanation! thank you very much!

so if I want to add, let's say switch for toggle shadow on/off, I need to create provider for value (true/false) and provider for toggle function and nest them? if we have more contexts {children} will be in nest hell

you're cute makes me watch more of your content, even though its outside of my topic to be learn hehe.

Usually your videos are easy to understand but this was too complicated for no reason. I watched Ben Awad's video about this and I immediately got how to do it. I recommend everyone watch it instead.

guess i need to see this video 2-3 times to actually understand it

This was a really good tutorial!

had to watch 4 times in order to learn

Ver clearly explained. The concept is really drilled into my mind. thank you for this amazing video

Very good and consise explanation! Thanks for one more awesome tutorial!

I actually needed this tutorial on a project i was working on that also involved switching theme from light to dark mode and vice versa so this fit my need perfectly.
the second half of the video was really confusing tho

@WebDevSimplified Great explanation. I'm curious on why you choose to create 2 contexts in ThemeContext Component (ThemeContext and ThemeUpdateContext) over having one context with the ThemeContext.Provider taking as value both darkTheme and toggleTheme in either an Object or Array. Something like <ThemeContext.Provider value={{isDarkTheme, toggleTheme}}.

im mentally unstable now

Good tutorial, but very quick lesson for a beginner like me in Reactjs. if you will just make it a little slow, Your tutorial is amazing. Anyway i was able to get the concept of your tutorial but as i said, My only comment is, it so fast. For beginners i doubt if they will get it. :-)

Kyle Thanks for your Guidance

U helped us to learn
How to create Context: const AnyContext = React.createContext()
How to Provide value from the Context to all Children: AnyContext.Provider value={anyState}

In Advance Section of creating SeperateContextComponent where we have all Context Related stuff
But, We only got to know how it works with Functional Component
What about Class Components?

AnyOne ?


Also, how can we work with data updating like strings, lists and objects???

But you should begin by explaing why you are using context in the first place. What problem does context resovles?

What's the difference between props and useContext by the way? you can pass that theme toggler by props too

God bless you man great videos

first half was smooth ....and during second half my ride started shaking 🥴🥴⚰⚰⚰⚰

Good stuff, great to get a deeper understanding of stuff I learn from The Odin Project from you on here!

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!

immaculate

Man so easy and convenient.

why should we use theme update ocntext insted of passing an object or array as value of ThemeContext ??

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.

Zone out after 5 min 😥

you again proved that this is a channel is a dustbin not more than that

I like when kyle say my job is to simplify web dev for you so you can start build your dream project sooner❤❤❤

ludwig

too complicated to demonstrate example dude.

An important note: try to avoid circular dependency

for a beginner, i am more confused than ever

Look forward for your courses Kyle!

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