Learn useContext In 13 Minutes

Рет қаралды 705,558

Күн бұрын

🚨 IMPORTANT:
Full React Course: courses.webdevsimplified.com/...
1 Year Free Hosting: www.atlantic.net/webdevsimpli...
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:
useContext Blog Article: blog.webdevsimplified.com/202...
React Hooks Playlist: • React Hooks
🧠 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:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ReactJs #WDS #useContext

Пікірлер: 605

@dimitrioszygolanis 7 ай бұрын

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.

@Xi-tler 6 ай бұрын

Yeah you r right

@AB-dp7pw 4 күн бұрын

How to use them in the component? Const {darktheme,toggleTheme} =usecontext(themecontext)? Is this right?

@dimitrioszygolanis 4 күн бұрын

@@AB-dp7pw Yeah, that's a way to use it. Another way is via custom hook like: export function useTheme() { const context = useContext(ThemeContext); if (!context) throw new Error("useContext must be within a ThemeContext Proviider"); return context; }

@brijspy 4 жыл бұрын

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.

@femaledeer 4 жыл бұрын

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

@akshbansal7715 4 жыл бұрын

Same here

@tvguideondemand 3 жыл бұрын

I watched Mosh's 2 hour tutorial video and it took me 4 days.

@cabejackson7518 3 жыл бұрын

lol i thought I was alone in this! I definitely set my pomodoro to watch this then do some practice problems then 25min later I was like wow I'm only like 5min into the video

@cabejackson7518 3 жыл бұрын

still learning a lot though, just slow n steady

@migueldomingos4570 3 жыл бұрын

@@tvguideondemand mosh videos are normmaly very detailed and so it makes sense you took so long ;-)

@smdude4 Жыл бұрын

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

@mrdoner3451 3 жыл бұрын

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

@heathenfire 4 жыл бұрын

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

@timothylander3469 Жыл бұрын

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!

@cordial 7 ай бұрын

etest

@SaurabhNative 3 жыл бұрын

This was another useful video from your channel. The first example of useContext in functional/class based components was easy. Second example was a but advanced but still easy to figure out and understand. Thanks for making such awesome content.

@k3v1n_xlr84 3 жыл бұрын

You are one of the best at being able to articulate advanced concepts in an easy-to-digest format. Living up to your name. I don't know where I would be without your lessons, you're literally godlike.

@piyush6631 2 жыл бұрын

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!

@ashleytennyson4717 Жыл бұрын

same here .. took me loads of time to get a grasp of this 8 min of 7zip video of something which is like a whole chapter

@je2587 Жыл бұрын

lol same

@ronyfluk8396 Жыл бұрын

If it took you 2 hours to understand what he did then I guess maybe the explanation isn`t that amazing after all? 🤔

@piyush6631 Жыл бұрын

@@ronyfluk8396 By that logic, you can learn HTML, CSS, JS, React and Authentication in just 10 hours by watching one of the BootCamp videos on youtube. Practising and implementing stuff takes much longer than watching a video on it, no matter how good the content is.

@ReadyBasket Жыл бұрын

@@ronyfluk8396 no. I thought that too but Web Dev Simplified is a great tutor. The problem is we are probably all programmers with different years of experience and understand the problem but React introduces a new way to tackle a problem that probably didn't really exist until you started using React. Most people think to switch themes, just have two css files and have some code to change the class of the body from light to dark..... and you can even use local storage to remember the users choice... However if you use React, that solution may introduce other problems therefore useContext has to be understood.

@varundoshi5136 Жыл бұрын

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

@zevspitz8925 Жыл бұрын

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.

@KevinVandyTech 4 жыл бұрын

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

@ivantorres6577 3 жыл бұрын

These are amazing thanks for making these, I am in a bootcamp at the moment and we are learning react. These help clear things up a ton so thank you for making these. Keep up the good work Kyle

@someshwartripathi8446 9 ай бұрын

How did life turnout after the bootcamp?

@DrMorganClydesdale 3 жыл бұрын

fantastic video! I am trying to combine this with your "useReducer" video right now for a somewhat complex bit of state management... I think a video like these combining the two concepts would be a smash hit my dude.

@christianalejandro4963 3 жыл бұрын

Amazing explanation. I've been able to refactor a complex, nested code using this pattern in minutes. Thank you !

@ozzyfromspace 2 жыл бұрын

Thank you! I was working on a little webapp and totally blanked on the pattern for creating the custom hooks (near the end of the video). You're awesome man 🎊☮️

@njayman 4 жыл бұрын

I have been waiting for this one for so long. Thanks a lot

@militoarturo 2 жыл бұрын

I had to rewatch to fully get it, but it all makes sense now. Thanks mate! As always cristal clear explanations, keep up the great work!!

@nanonkay5669 4 жыл бұрын

I think you can pass in not only state but also functions in the value attribute of the provider like this: {children} ...and then just destructor the two depending on what you need in a particular component.

@ylmazcandelen3121 4 жыл бұрын

yeah, I was like that's really easy why we need another provider but he finds his way cleaner I assume.

@wizhaa 3 жыл бұрын

which variable would you destructure? like usually for props it is const { state, function } = props. what would you use instead of props in our children components?

@nvr5073 3 жыл бұрын

@@wizhaa useContext(name of your context)

@user-mv4oh8yp1y 3 жыл бұрын

@@wizhaa useContext(CanYouReadThat)

@6365bharath 2 жыл бұрын

Yeah why would you wrap it around another provider. It messes the code

@tushargoyal3088 2 жыл бұрын

what are your thoughts on passing on the update theme function as a value to the original theme context? (instead of it being its own context provider)

@tino6986 3 жыл бұрын

Amazing, I have a class yesterday about useContext, but now, after your video, I'm closer to be able to handle it!!

@AndroidCyclist Ай бұрын

Thank you so much for making these videos. My job is moving to react native from native mobile development and I have found these to be very helpful and even shared the playlist with my team.

@andremazetto 2 жыл бұрын

Wowwwwwww! I can finally understand this. Very well explained and broken down. I like how you explain from many different angles so you really get your point across

@13has 2 жыл бұрын

You're my hero at this point. I'm literally watching this while on the job.

@Davidgon100 2 жыл бұрын

Your reactjs videos are the best! You explain so well and your examples are excellent. I understood this right away after being confused by someone else's vid

@isacoliveira6326 Жыл бұрын

This is easily one of the most insightful videos about web dev I've ever seen. Not only because of the pattern it advances with useContext, but also for how well it illustrates the pursuit of encapsulation and ellegance. Kudos!

@codesymphony Жыл бұрын

nothing elegant about it

@bulentgercek Жыл бұрын

Hatred is of no use to you or anyone else.

@alex.noriega 2 жыл бұрын

Hey old friend! Your like a team mate who takes enough time to explain what we need for the sake of continue our work. I always go back to this channel if there's any concept or JS feature that I don't really understand right after read hundreds of articles or blog publications. Thanks in advance.

@Loys2020 2 жыл бұрын

This is an awesome tutorial. I needed to watche 2 times but it's very clear how useContext works. Great, Kyle. Wish you all the best.

@abhishekghosh2316 2 жыл бұрын

This is so perfect. Exactly what I was looking for. Thank you :)

@TheRealAfroRick 2 жыл бұрын

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.

@liondepierre Жыл бұрын

Agree

@user-ti9yn8wg6o Жыл бұрын

Sorta agreed. Although theme here is just boolean value, but new comers need to wrap their head around this one more level

@jtaylor8606 Жыл бұрын

Absolutely, I just can't get my head around this explanation, going to need to check another vid

@kainthjaskaran Жыл бұрын

@@jtaylor8606 Hey check this video out. It helped me a bit better than this kzfaq.info/get/bejne/nruYiteKvc3LYH0.html

@dvirhanum9530 Жыл бұрын

but what about updating it's value? How would you re-render the app?

@mizanrifat 4 жыл бұрын

Great tutorial as usual. I have a question. Instead of creating another context if i pass toggleTheme in themeContext along with darkTheme value is there any problem??

@KemMuhammad 3 жыл бұрын

Just what I needed this Saturday morning, made my app work perfectly! ~ Thank You!

@S_Chandra503 3 жыл бұрын

Simple and nice explanation of useContext. Thanks a lot Kyle for such a videos. Keep up good work!

@programmingpython584 Жыл бұрын

These hooks videos were just awesome. really easy to understand. Thank you so much

@eddiechen6389 3 жыл бұрын

Yo your youtube title is telling the truth!!! hands down the best version so far !!! thank you!

@padeiroPorAmor 2 жыл бұрын

Awesome video, I like how he increase the code without loosing the complexity understanding of the context.

@LieberLois 3 жыл бұрын

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 :)

@deonvisser2480 2 жыл бұрын

I was also wondering why he didn't do this.

@talatkuyuk6556 2 жыл бұрын

In your case, you are right. But think about you use styled-component's ThemeProvider which accepts only DefaultTheme, that is why nested provider is an option for this case.

@piusvictor8780 2 жыл бұрын

This tutorial is highly recommended for anyone who needs to understand context API concepts, great Job KYLE ✨✨✨

@chrisstucker1813 Жыл бұрын

This is an absolutely fantastic tutorial 👏🏻

@maksimkremlev2836 2 жыл бұрын

Thanks a lot, you are an exceptional teacher and your code looks so clean!

@solomonrajkumar5537 3 жыл бұрын

there are no words to appreciate your explanation.. infinity hats off!!! God Bless!

@yumyum7196 Жыл бұрын

I love your videos and I usually get it on the spot, but honestly this is the first time that it went straight over my head

@hwj8640 2 жыл бұрын

awesome video, after seeing some articles on internet, this video helps me understand useContext in in only 13 minutes. thanks!

@rakeshpk4991 3 жыл бұрын

Well explained. This is the best explanation about useContext compared to all other videos in this subject. Thanks.

@dl_dt1467 2 жыл бұрын

Thank you so much! I recommend everyone to code along and examine to understand easier

@garywaddell6309 3 жыл бұрын

Not too sure I understand some of the negative comments, this was a super explanation of useContext and a perfect approach to allow token based security for react apps. Thank you!

@toohee8561 Жыл бұрын

Look forward for your courses Kyle!

@peterlogo1149 3 жыл бұрын

Thank you for the tutorial saved me a lot of time in my current project. God bless you.

@danielEpifanov 3 жыл бұрын

wow, this is exactly how the mui built their theming. Thank you for the explanation before that I was struggling to understand it.

@vasilemidrigan50 Жыл бұрын

Thank you, Kyle! As always, clear, concise, and direct to the subject! 💯💥👋👌

@stevereid636 3 жыл бұрын

This is Awesome! I’m totally going to make use this tomorrow. 👍🏾

@mateusbarbosa5266 11 ай бұрын

I love Kyle's lessons, he's probably the one instructor on youtube that I don't get bored watching, but I can't be the one who watches his videos in 0.75 speed, dude be too quick with his logical structures as he speaks lol

@tharunchowdary14 2 жыл бұрын

Thanks for the detailed explanation as always, very helpful

@rohitchatterjee2327 4 ай бұрын

so very helpful, just the right level of detail

@SammarpanDasguptaOfficial 2 жыл бұрын

Thanks for makes these things very easier for me. Love your content. keep it up.

@danielrojasbarco6760 Жыл бұрын

Amazing explanation!! Thanks a lot.

@skylerwillden4477 3 жыл бұрын

Correct me if I'm wrong, but why do you need to create a second Context for updating? Can't you simply pass in the update function along side darkTheme in Value? I've seen multiple other videos where they do just that

@MrJimmyKho 2 жыл бұрын

Thanks for the simple and straight forward tutorial.

@MiSt3300 4 жыл бұрын

I love your channel bro, keep up the good work!

@Rosalitamaria Жыл бұрын

Thank you! helped me a lot

@josevelez6865 3 жыл бұрын

Great video. Thanks. When you 'take it a step further' around 5:45, I had to re-watch a few times. LOL. My brain shut down the first time watching. I guess, I was still processing the first 5 minutes.

@Jorsfel 3 жыл бұрын

This is brilliant, thank you!

@wasimnadaf11 11 ай бұрын

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

@rashikraj7404 11 ай бұрын

This was a really good tutorial!

@mhamzarajput 4 жыл бұрын

Man, you are awesome. Your videos are so much helpful. God bless you.

@juanabrate4189 3 жыл бұрын

can't thank you enough. got this to work in minutes

@corndoggydogdog Жыл бұрын

Love the video. Thanks for the wondeful contribution. If I wanted to use an external stylesheet in js react native, could context be applied? Not quite sure how that would work? Would love to hear from you. Thanks again for your fantastic work!

@justinr4650 3 жыл бұрын

Kyle you are the man, I can already see you as the top developer trainer in the world!

@tuttodev 3 жыл бұрын

I have a question: when theme state changed and I have functionContextComponent that is a functional components without state and without use of useContext render this component ?

@GusNando 2 жыл бұрын

Thanks kyle, your tutorial so simple i can easily understand 😄

@kostiantynkarzhanov9216 Жыл бұрын

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

@thegroingringus2607 3 жыл бұрын

Exactly what I needed dude ty

@k4qdex 2 жыл бұрын

Very nice. Easy to understand. Good example of context

@karthikudupa5475 2 жыл бұрын

great stuff! thanks a ton!

@artemtarasenko9744 2 жыл бұрын

Alright, seems like the question about splitting things into two contexts is a common one here, but how about custom hooks in the end, can't I just get 2 variables from 2 contexts and don't bother with custom hooks for that? That's another point I didn't quite understand.

@PatrikRasch Жыл бұрын

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

@RipedGames 2 жыл бұрын

This is really clear and good guide to this. Though I went through a react course and have solid fundamentals so there is a bias

@geeland96 Жыл бұрын

Thanks for this. Will this work with React Navigation? I've been struggling to pass useState props into my various navigation screens

@AlldayIshid 3 жыл бұрын

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

@pim691 3 жыл бұрын

I've really come to like his personality and his method of explanation.

@arthurswanson3285 3 жыл бұрын

Right. His cadence sounds like it was the outcome of a deep learning algo.

@scriptkeeper8243 3 жыл бұрын

Be greatful youngling, Kyles stormed Area 51, found alien tech, then set loose their clones to teach us all how to upgrade our world and get better paying jobs.

@oliversaxon8656 2 жыл бұрын

Why would an alien build a human is my question

@dm.hol.3624 2 жыл бұрын

are you all gays here lol

@marcin31337 Жыл бұрын

Can someone explain why App doesn't have access to context? If we leave the button in the App and import the same custom hooks as in the FunctionContextComponent, the application will not work. Why?

@dustymccord 3 жыл бұрын

This was a great tutorial. This is something i will refer back to in the future

@MolinRJ 3 жыл бұрын

i am refering that to myself right now, for the third time in a week

@DanMazzilli-pv9yl Жыл бұрын

Great video! Thanks :D

@m7amedk 3 жыл бұрын

I love it very neat! Thank you 🙏🏼

@ridl27 4 жыл бұрын

Kyle, can you share the code from this hooks series ? it would be nice to use as reminder :)

@maxli2134 Жыл бұрын

Hello, referencing he 6:30 mark , the ThemeProvider that gets created here, is it a component? or simply a function?

@abdujemal1872 2 жыл бұрын

I love your way of teaching.. keep it up

@cravisbouyin4864 3 жыл бұрын

Thanks Kyle for the context theme in React.

@bushigi5913 3 жыл бұрын

3:42 Could anyone tell me why Kyle put a function(which return the css setting object) into the div style instead of just an object with all the css setting?

@mmm29267 4 ай бұрын

great video! thanks a lot

@mrluckyuncle 8 ай бұрын

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

@klhmia 3 жыл бұрын

Can someone explain to me why 'ThemeStyles(dark)' function in the Class component doesn't have/need the 'function' keyboard behind it?

@bushigi5913 3 жыл бұрын

because it's in a class, which the function becomes "method", you don't have to specify "function" keyword before it!

@braingamedotcom 2 жыл бұрын

you sir, are a legend.

@UmerAbbas8 Жыл бұрын

How do you test a component that uses the custom hook for updating the context ? please help

@dcmbassi 4 жыл бұрын

Can a context provider be used as a react fragment if you want to return siblings?

@hohugo2292 Жыл бұрын

Hi, why didt directly import ThemeContext to Function componrnt instead of creating a new function to return it to...

@amindhahri2542 Жыл бұрын

Kyle I have a question how can i test the useTheme function with jest?

@tanjimulislam4762 3 жыл бұрын

Do we really need to implement the complex built in or custom React Contexts in our code even if we can easily maintain states by writing custom hooks or hocs?