Learn useContext In 13 Minutes

in this video you're going to learn everything you need to know about use context also at the end of this video I'm going to be giving you a bunch of best practice tips for how to handle context in your application so you're definitely not going to want to miss that also lastly if you're interested in learning react in depth everything you need to know to get a job make sure to check out my full react course I'll link down in the description of this video but first I want to give you an entire year of free hosting and that's by using today's video sponsor atlanticnet hosting they're giving you an entire year long free trial of their posting and if you use the code Kyl when you check out you're gonna get an additional 50 dollars of credit you can use towards whatever you want on top of that these servers are incredibly powerful they have great data reliability and redundancy so you don't have to worry about your data disappearing or going offline make sure you check out Atlantic net using the link down below welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this one now to get started I have some really basic code set up to create a basic context in react I'm gonna go over this so you can understand exactly what's happening especially if you're not familiar with context so at the very top here you can see that we're using the react create context function to create a theme context and then we're just exporting that so we can use it in the rest of our application then inside of our app component we just have a single state set up with you state which is just going to be a toggle true/false for if our dark theme is enabled or not we have a function for toggling that dark thing between enabled and disabled and then lastly down here is where the real meat of the code comes in we have a button that when we click is going to toggle the code and as you can see on the right you can see we can toggle between dark and light on our class theme here and then we have two different components we have a function based component and a class based component which are going to do the exact same thing it's just so we can compare and contrast the class version and the function version of context because they're actually very different and another important thing to note is that when you're using context it's broken into two different sections you have your context provider which is what you want to wrap all of the code that needs access to the information in the context and it has a single prop called the value which is going to be whatever the value of your context is and the important thing about context is everything inside of our provider so all of these components all of their components children and those children and those children so on all have access to the variable in this value prop of our theme context provider so it's really important to notice that context is for passing down props essentially all the way down into any of the children without actually having to manually pass you know dark theme equals dark theme into the props of each one of these components it's just available to all of them it's kind of like a global state for all of the children of the provider so now that we have that done for our app now let's move on to our class context component because this is already completely filled out as you can see in our render down here we're using the consumer portion of that theme context which is a function that we need to pass here that function is going to have our value which in our case is dark theme and then whatever returned from that function is what's rendered so on our case we're just returning a single div here that gets some theme styles and then has the word class theme inside of it and that's this black rectangle and when we toggle it becomes a gray rectangle so we can easily change our theme and we just have our theme styles being defined up here and we're also as you can see importing that theme context from our app here so it's important that we export this out of here now let's move over to our function component here which is just completely empty it's a blank component that just has a div of function theme and in order to use a context inside of a function component you can't actually wrap it inside of theme context dot consumer here that is not how you're actually going to work with this what you need to do instead is use a hook called the use context so we can just import that hook use context there we go and we have our theme context from our app and in here we can just inline without having to do any wrapping or nesting or function calls we can just say constant dark theme is going to equal use context our theme context so we pass in our context to this use context and it's going to give us the value from that context in our case dark theme and then we could just use that inside of any of our code that we want we don't have to worry about any of the complex nesting that we you see over here where we have the in context consumer and the nested inside of it is a function and the nested inside of that is our actual return we don't have to worry about any of that so let's just copy over our dark theme code here I'm gonna paste that in Const theme styles is going to be equal to that and let's just change this dark variable here to dark theme and let's set this style here to be equal to that theme styles and if we save you can see our function theme now is going to follow it with our toggle theme every time we click it it's going to update and the code here for our function component is drastically simpler than our class component because we're saving ourselves all of this complex nesting which I always hated about context so having this functional version of use context that just gets rid of all of that nesting simplifies your code drastically is to me a huge benefit in using context inside of function components and not worrying about class components and in essence that's really all there is to the use context hook you just pass it in a context it's going to give you the value of that context and then you can do whatever you want with it but we can take this a step further and actually simplify our code even more especially in regards to this part of our code with all of our state being stored inside the app we want to extract all of that out into its own custom hook essentially so let's go over here instead of our source and we're gonna credit called theme context AAS and this theme context is is going to extract out all of the logic for our theme information so let's just copy this over into here for now so we're gonna have all of our theme information we're also going to have our provider inside of here as well as the ability to update our theme all inside of here so in order to do that what we need to do is create a single function we're going to export this function this function is going to be called theme provider and this theme provider is going to take in some children and what this theme provider is going to do is it's essentially going to take the of this theme contact stop provider here and that will allow us to take all of this code and put it inside of our theme provider which we have right here so let's copy this code down into here so we have our dark theme and we have our toggle theme we need to make sure we import in react as well as use context and we need to use state to come into here and we're going to set that from react just like that and we also need to create our theme so here we're going to return our theme context dot provider and we actually need to make sure we create that theme context so it's down here we can just say Const theme a context is going to be equal to react create context and in here our value for this is going to be dark theme and make sure that we return the children inside of this so now essentially what we're doing ignoring this toggle theme for now let's just pretend that's not actually there essentially what we're doing is we have our theme context provider and we're passing in the value of dark theme and then we're rendering the children and all of our information for our context is all inside of this one single component so if we save this and go into our app instead of having to create our theme here and then set up all of our theme information here instead we can do is just say import theme context I'm sorry theme provider from and we want to get it from dot slash theme context this is just going to be wrapped here inside of brackets and now down here we could just use theme provider we don't have to worry about any of the value information any of that stuff we just have theme provider and it's going to take care of all of the values for us so we can get rid of all this code up here now one problem immediately that you'll notice with this code is that our toggle theme function doesn't exist yet so in order to make that toggle theme a reality what we need to do is inside of our theme context here we need to have another theme context which is going to be for updating our theme and that's where this toggle theme comes in so let's create a Const theme update context which is just going to be a new react context like this and then we can wrap both of our context inside of that so we can just say theme update context dot provider and the value is going to be equal to here toggle theme so just our update function and then all we need to do is just put our children inside of that so now this theme provider here that we've created it's going to take in the children so we can wrap it around anything and it's going to give us access to both our theme as well as the function in order to update our theme and then it's just going to render out the children so just drastically simplifying all of this code for us into one place so we don't have to mentally worry about handling that so what we can do instead of our app here is let's just remove our class context for now and we're gonna move this button into our function component down here so let's just do that now we're going to move that into here just so I can demonstrate that now we can update this context from anywhere that we want to it doesn't have to be in the one place that we defined it now if I go back over to the app here we can simplify this a little bit and save this as you can see this is all of the code that we can actually remove this right here and as you can see our code for our app is drastically simplify just this theme provider and then we put everything we want inside of it and this theme provider takes care of all of the information for updating as well as handling its own internal state but how do we actually access our theme provider now inside of our function component we can't use this theme context anymore so how are we going to use this with this use context well instead of handling the use context inside of our function component itself inside of our theme context we're gonna expose custom hooks so we can create a hook which is going to be called use theme and this use theme is simply just going to return use context of our theme context just like that so it's going to essentially wrap our theme context to use context inside of its own hook called use theme and then we never need to worry about accessing this theme context outside of this one single file we can do the exact same thing which is going to be for a theme update so use theme update and it's going to use our theme update context like this and now instead of our function component we can just get rid of this use context and pour and instead we can import use theme and use theme update and we want to get that from dot slash in the context whoops theme context just like that and now we can say use theme I can spell properly that is use theme and we can use theme update and this theme update is going to return our toggle theme function just like this and now when we save we should see everything render and we click toggle theme you can see that our theme is correctly toggling and in order to make sure we understand how this works I'm going to real quickly kind of refresh exactly what's going on so inside of our app right here what we have is our theme provider and this is wrapping all of the logic for handling our state updating our state and pushing out those different values to all of our children so inside of our theme you can see we have our theme provider which is handling creating our state updating our state and then persisting both of these different values down into our children and then we have these two custom hooks which just give us easy access to these different values so we have our theme value as well as our theme update value and this is just a really clean way to handle context inside of react because this is a repeatable pattern essentially any context you create you can create this basic template for the context and then inside of your components all you need to do is use your custom hooks that you created for using the theme or using the theme update function and then when you need to provide the thing you just need this one simple theme provide class and we don't have to worry about any of the complexities of handling how react does context internally all that is taken care of in this single theme context class so we don't have to worry about any of that and that is really handy for making the rest of your code really easy to work with and easy to maintain and that's all you need to know about use context if you want to take your react knowledge even further and learn everything you need to know about react make sure to check out my full react course link down in the description below thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 450,093

Keywords: webdevsimplified, react hooks, react tutorial, react js tutorial, react hooks tutorial, react hooks project, learn react hooks, learn react js, react beginner, javascript, js, learn usecontext in 10 minutes, usecontext, react js usecontext, usecontext hook, react usecontext hook, usecontext tutorial, reactjs usecontext, react js usecontext tutorial, use context react js, learn react usecontext, react usecontext js, react context hook, react context function, react context, react

Id: 5LrDIWkK_Bc

Length: 13min 7sec (787 seconds)

Published: Sat Jun 27 2020