React Context Explained in 10 minutes

in this video we're going to learn about react context and the problem that it aims to solve i've created a little application for a website called coffeehouse this application needs to display the username in several parts of the application up here in the header here in the main area where you can update the name and in the footer to get a better idea of this application let's take a look at a diagram this is how our application is going to work in the app component we're going to have a username that username is going to be passed down to our various components through props app is going to contain a header a content and a footer component then the header is going to contain two components as well branding and a menu and then this can be shown in our application so this is our header over here this is the branding that just says coffeehouse and this is the menu over here represented by these two different components the content is also has two different components it has a promo ad and an update profile the promo ad is this picture over here that gets displayed and then we have our update profile over here lastly we got our footer our footer is also split between the left and the right so we have our footer branding and our footer links so kind of like the header here's our branding and here's the link the way information will be passed around for the username is that the app will have the username and then pass it down through props to the various layers so through the header it would pass the prop down for username here and here to get to the menu the display on the user profile once again goes through the content and then down to the update profile and same thing for the footer so we're passing a lot of props around to make this application work let's take a look at the code now if we take a look at the code starting from our app we're tracking some state the username then we have to pass that username into our header our content and our footer additionally the content also gets an update method then inside the header if we take a look at that one we have to destructure the username then go into the menu pass the menu in and once we get to the menu destructure the value then finally consume and use that value our content is exactly the same as well except we're passing two values in then update profile gets two values destructures those two values and then eventually uses twos two values in the code that we can go ahead and we can change the name and we see it reflected here and we see it reflected over here at the bottom in the footer and the footer is exactly the same too pass in that thing go into another component pass it in destructure it then finally use it as you can see it gets really complicated when you have to continue to pass props from layer to layer to make this code easier to read and easier to use we're going to use a new feature in react called react context if we go back to our diagram you'll see that everywhere that i marked blue over here is everywhere that we had to pass that prop down now let's go to a different diagram where we use context in this diagram over here you can see the blue areas are where we're specifically using the username now app is highlighted because it's going to be setting everything up for us then in lower in our diagram over here you'll see that everything else is yellow except for the components that are blue that actually use the username and show it on the screen now what this little area over here does user context what it's saying is that any components that are within this little block over here are allowed to access the username through the context context can also be thought of as global data up here in the app we set that global data and then later down inside our application we access that global data without having to pass it through props let's take a look at a simple example of using a context in react so back in the application over here and this is the application that i'll be uploading to github if we go to a different branch and we go to the branch called hooks initial we'll go to that branch and this will be the initial introduction to how we use context within our app.js if you recall in our diagram over here this is where we're originally going to set the username so if we go inside our app.js we're going to see that we have react dot create context we don't have to import anything extra just import react then that creates a variable for us a variable that we want to export we set it as a constant and we also export it so that other parts of our application like the header and import it to get the value now all you have to do with the username context that we defined over here is wrap the components now in our diagram we said all of these components over here will be able to access the username regardless of which component they are or where they are in the component tree going back to our app.js over here what we do with that user context is we have to wrap our code and we have to wrap it with the provider so you say user contacts dot provider wrap the header content and footer and all the components below it if we go ahead and change the initial value of our user context over here to jim and then refresh our application you'll see that the only part that changes right now is the header it's the only part of the application that's using context let's take a look at how that works you'll notice the header has no props passed in we go into the header also no props destructured or passed to the menu and then within the menu what we're doing is we're using a hook a hook called use context the use contacts hook is used to get the value from our context the value that we're going to get is the username from the username context you can see that over here we import the user context from react then we also import the username contacts that we created back in our app.js over here then back inside our menu over here we go use context pass in the username context and it gives us back a username we then take that username and display it on the page just like you would with state or props let's go try using this pattern on another part of our application so we'll go to our footer and then with our footer we'll go to the footer links now we just have to do a couple of things one is we need to import use context we'll import use context from react then we also need to import the username contacts we created back inside of our app we'll go back to our footer links and we'll import that and that's not a default so we need to put braces around it and we'll just import that from our app file then inside our footer link we'll just define a constant at the top and use that hook to get the username and inside use context all we do is pass in the username context we get that value back and then we can replace the atom over here with username and now when we do that remember our default value is jim if we go look at our footer over here we'll see that the value now is jim the only thing that we haven't done is the update now we could change our user name context to just be user context and provide the value with an object that represents not only the current name but also a way to set it instead i'm going to show you a much more elegant solution so this solution is over here in another branch called hooks improved now you'll notice this solution over here is using a component that i've created called user provider insider app.js that user provider looks just like our other provider and it takes in a value our application over here displays as it always did now if we go inside of this user provider this is where the real magic happens we actually have two contacts inside here we have a username context which is the same one that we had before and we also have an update username context so think of this as your set method let's take a closer look if we jump into our app.js over here we have a user provider the user provider takes a value and also you'll notice the user provider wraps these other elements when it wraps other elements that means it can take it in as children so here's our user provider and then we destructure the value out and the children which represent all the other components then if we look at our return statement over here what we're doing is we're using the children over here in between the context and above we take that value in and we actually have some internal state that internal state is the username and a set username so that username over here is being used by our username contacts the provider and is represented by that value and then our set username is used by the update username context.provider now all of this is tucked away and hidden away inside the user provider you expose a way for application to go ahead and make use of these values the name value and the set name we export to custom hooks a use username and it's wrapped by use context username context so we're able to extract the value that's here using use context and giving it that context and then use update username while we extract that method using use context and the update username on text and now here's the really elegant part of our application once again no properties are being passed in but if we jump into that menu the way we use this is we import our use username from our user context and then all we have to do is say const username equals use username then display that value and it's really really elegant and looks really nice if we go back to our application we go into our content jump down into our update profile name it's also just as elegant use username gets us the name over here and then we also extract the method that we can use to update in this particular part of the application over here all we're doing is we're storing some internal state so that as i type it doesn't change the value but when i click the update button what happens is the on click event fires we throw our on update user name over here and all we do is call this here which then will update the value inside of our context and this here provides a much more elegant solution you enjoy my videos please subscribe like and share

Channel: Coding With Adam

Views: 1,112

Keywords: React, react, react context, react context tutorial, react context explanation, react context explain, explain context react, context api, simple context explaination, global data, react state, state management, react state management, codingwithadam, adam, React context in 10 min, Context quick explanation

Id: hUhWtYXgg0I

Length: 10min 20sec (620 seconds)

Published: Tue Aug 31 2021

Reddit Comments

[u/CodingWithAdam]

In this video we learn about react context and the issue that it solves. We start with a demo application that uses props and refactor to an elegant solution that uses react context.