React Hooks useContext Tutorial (Storing a User)

so we're gonna be taking a look at the user context hook now one of the most frequently asked questions I get about this is how you can store a user in the context and share it throughout your application so in this video we're gonna be using the use context hook to do just that so what I have set up here is a small application using react router what it looks like is I have a single page or two pages I have an about page and a home page and you can toggle back and forth between them and so what I want to do is I want to be able to grit the user or who the current user is on both the home page and the about page so that's what we're gonna do in this video now the code for this is right here this is my router so I have a navigation bar that's being displayed on each page and then I have react router Dom router and a route that's displaying an index and an about page now my index looks like this my about page looks like this so very basic components we just have an h2 that is being displayed so let's go ahead and get started with this so the first thing that I want to do is create a context to share between my components so what I'm going to do is I'm going to create a new file and I'm going to call it the user context is and I'm gonna import from react and what I'm gonna import is create context and I'm gonna say export Const user context is equal to create context and here I can pass them when I want the initial value to be in this case I'm gonna have the initial value be null so now this user context I'm going to import in my app over here so I'm going to say and I'm going to wrap the components in a provider now this is going to encompass all my components that I want to be able to grab the state from so for example if I want to get in my index in my about page both of those components if I want to get the user context value then in my provider I need to wrap these two so what I'm going to do is I'm going to say user context dot provider and this is a component which I wrap around whatever components I want to supply be able to get the context for all right so I have my provider here and then I can pass some kind of value so the value I'm gonna pass it's just hello from context so now what I can do is any of the children components inside of this provider I can get the value so how do I do that well let's start with the index page over here so I can say Const message it's equal to use context so we're going to use the use context hook and now we pass in the context that we want to get the value for in this case is this user context that we created I'm gonna copy that over and I'm gonna import that and so now I can display this message so I'm a display a div here and I can display my message so now if I go to the home page and give this a refresh I'll do I crash things nope I just forgot to restart it so where I'll restart this backup so now when we go to our home page we're gonna see our h2 element home and then we're also going to see our div element with the message which is going to be the value of the value in the context and that's this value right here that we're passing to the provider all right so now we can see hello from context now on our about page still blank so we can grab the same context value over here and we can display it the same way so I'm gonna copy this paste it here and this is the about page and let's import this stuff it's not gonna let me auto comport that one but it would let me do it there and now we can get this on both pages so the advantage of using context is we can get the value of something no matter where the position this is in the component tree so this could be a deep child and we can access the user context by saying the use context took now we can make this more advanced by changing the value that's being stored in the provider and then everyone is going to get the update so what do I mean by that well so I'm gonna say Const you stayed up here and this is just going to store the state of the value so in this case you can say hello from context and import use state so this can be value and we have set value so now what I can do is in my provider here I can pass in an object which is value and set value and now in my components over here I'm gonna move this over to the side actually I think we're done with use context I'm just going to close it so now my components I can get a value and a set value so we'll splay their copy this and do it in our about page - and now over here I can say set value when I want to sew a button change value and we're gonna on click and set the value - hey so now we'll refresh this oh we're guess we're on the about page I was like why aren't we seeing a difference all right so now when I click change value here you'll notice the value here changes and now when I go to my about page it also changes here so basically whenever the context value is changing or that provider values changing we're going to get the changes through use context and we can access whatever we pass in as a value here in this case the value and set value now if we want to you'll notice we're creating a object every single time to pass into value one thing we could do here as we learned is we can use the use memo hook to create what the value is so here I'm going to say provider value is equal to use memo and here we're going to return an object the value and set value and I want to do this whenever value and set value changes so provider value in this case this is not going to make a huge difference but if your component is making a lot of changes the value of the object is always going to change so this prevents this prevents this provider value from changing unless the value or set value changes okay so let's take this to the next level now so now you've seen how we can pass some state and threw out basically multiple components using use context and how we can pass also an object and get functions that we can actually call and we can update the state and we can update that state across multiple components so the next step is to actually start storing at user and so basically we're going to do the same thing with a user so here we're going to start with in all value we do not have a user and then we may have for example a logon so here I'm gonna say logon and by the way I can change this to be user and set user I think that's better so set user and user and I can just rename this to value if I want to also good to note you can push f2 and vyas code and then I'll let you rename something and it will change it all over the place so now we can say user and set user in our context so now what I'm going to do is I'm going to display the user by saying json.stringify user and we're gonna do pre tags here and I'm gonna say null too and it's gonna be set user and I'm gonna copy this to my about page over here so user set user in case we want to set the user in the about page we probably are not going to but in case you want to do you have access to that so now in my index we want to login the user so how might we log in a user so I'm going to make this a a synchronous function here and now when I click on this button I'm going to get the current user by logging them in so it's login and I'm going to import this now this is a function that I just created here login over here it's not letting me auto import it which is making me sad now it is I just had to open it up so for the sake of this I'm just mocking this login function but it returns an object which is the current user now of course in your application I want to go ahead and make a request to the server for example and get the user if they logged in correctly but you get the idea so we login we get the current user and we can store it in our context like this alright so now let's look at our application over here we can see the user is not there to start off with and I guess is they be out I keep coming to the bow page and wondering where my button is so now if I login we can see the user shows up and so now I can do fun stuff like I can conditionally render buttons so I can say if we have a user display a logout button if we do not have a user display a login button so I just added a ternary here so if we have a user logout otherwise this so then our on click here you know I can call logout to my server if I need to and I can say set user is equal to null right so now I can see I can login we have a user in our context and now I can log out and it's null and now the cool thing about this is this is affecting all the different pages that need the user so am I about over here is null if I log in you see the about has the current user and then we can come back again and we can logout and you get the gist so the point is that is how one way you can go about storing the user and passing it throughout all your components get that value using context the gist of it is at a top level you store and some state the current user and then you allow other people to see that user by creating a context and passing the value down and then those components subscribe using use context and now whenever that user changes we get a new value in our state here so there you go that is how you can use use context hook and react you

Channel: Ben Awad

Views: 174,392

Rating: 4.932951 out of 5

Keywords: useContext, useContext Tutorial, useContext user, Hooks useContext, React Hooks useContext, React Hooks useContext Tutorial

Id: lhMKvyLRWo0

Length: 11min 37sec (697 seconds)

Published: Sat Jun 29 2019