React Hooks Tutorial | useContext

in this video we're gonna take a look at the used contacts took in react we're gonna start out by talking about what problem it solves and then we're gonna see how to actually use it in our code so what exactly is the problem that use contacts can solve well often when you have a tree of components a child component several levels down in the tree might find that it needs access to some data further up in the tree so in this hypothetical example let's say that in app j s which is the parent component we had a property name with a value of Bob and three levels down in the child three component we wanted access to that name property well what we'd normally do is we'd pass it down as a prop from app dodge a s to child 1 to child to and then to child 3 and there are a couple reasons why that might be less than ideal for one thing child 1 and child 2 here are just intermediate elements they're not actually using that name prop so all they're doing is forwarding it on to the next child component just so it can finally arrive a child 3 and for one thing this is adding to the code and child 1 and child 2 cluttering it up and perhaps making it more difficult to find the actual necessary parts of child 1 and child 2 and then we're creating the situation where in child 3 if we want to trace back the root of that prop we have to go on a bit of a hunt going up to child 2 going up to child 1 and then finally arriving back at app dot j s to see where that proper agitated so it use context is going to do is it's going to create kind of a store for us in which we can just grab the data that we need no matter which component we're in now according to the react documentation under the section when to use context they say that context is designed to share data that can be considered global for a tree of react components so a good case for using context would be anytime we have some data that we want to consider global some data that we think we might want to grab from any component in our app and they give some examples here such as the current authenticated user the UI theme or the language preference of the user now we're almost ready to start looking at the code for use context but before we do that let's just take a quick moment and talk about two key ideas that are necessary to understand for using context and those are the ideas of the provider and the consumer and it's pretty simple the provider is going to be a component that the subcomponents or consumers are going to subscribe to because it's the provider that holds the value that the consumer or subscribers want access to so we're going to make a provider component give it a value attribute assigned to whatever value we want the consumers to have access to and then we're going to wrap those consumers or child components in the provider component so with that being said let's get into the code all right so here we are in app dot j s and V s code and we're going to demonstrate use contacts with a very simple example we're gonna have our parent app dot J s component and then we're gonna have two sub components we're gonna have a child one component and a child two component so let's go ahead and create those come into our source folder and we'll make child one dot j sx and then we'll go ahead and we'll make child 2 j sx and i'm gonna go ahead and i'm gonna split the screen into three columns so we can see everything at once so we'll put child two over here in the third column and child one in the second column in the middle so an app touch a s let's set up as a default prop a name property and I'll just assign it's my name Gregg so we'll say app dot default props equals an object with name Greg so now that prop will be available on our app component and we can bring it in here as name and in child 1 and child to we're gonna set up some simple stateless functional components because we're gonna have a hierarchy be apt Egeus with child one as a sub component and then child two as a sub component of child one and what we want to do is we want to show how a child 2 can get access to this named prop without having to pass it down through child 1 so I'm going to quickly go ahead and make these stateless functional components [Music] so I've gone ahead and I have quickly set up these stateless functional components and child 1 and child 2 and what I want to do is I want to import child 1 into you app that J s and then I want to bring the component in here in this div should be child 1 and then in child 1 I want to import child 2 and again I want to use child 2 within this div here and yes I know this is a contrived example but still it's gonna show how we can use use context and it looks like I forgot my dot slash here in front of child 2 so I'll just go ahead and put that in so now we've got this named prop here and we're bringing it into this component so of course we should be able to use it let's make a simple h1 and see that named prop out put it in the browser and there we go we see the name Craig so let's flip back to BS code now our goal is to have access to this named prop in child 2 and normally we would pass this down as a prop and go through child 1 into child 2 but for this example we don't want to do that we want to use use context so this is how we do it the first thing we need to do is we need to bring in create context from react so let's bring it in here what we're going to do with create context is when we invoke create context it's going to give us an object which is going to have that provider that we want so let's come down here and let's invoke create context and let's save that to a variable will create a Const and let's call it name context so now we've created a context object and we've saved it to our name context variable so that's the first step what we have to do now is we have to set it up as a component to wrap our sub components or our subscribers so I'm going to get rid of this h1 here and I'm going to set up my context object like this name context dot provider and this is a component so we're going to wrap our child 1 component in that in this provider component we need to give a value attribute so we're gonna write value and we're gonna sign that to the name prop so now this provider is basically like a store which contains this value this name value and anything below it in the component tree we'll be able to have access to that value so even though here we're just seeing child 1 wrapped in this provider child 1 imports child 2 so basically both child 1 and child two are sub components of this name context top provider component now there's one other thing that we have to remember to do and that is we have to actually export our constant aim context or a name context object because we're gonna import that name context object into any of these sub components that are gonna make use of it so essentially what we've done so far is we've set up our provider and we've defined the value that that provider is going to hold so now let's see how we go about consuming that provider so child 2 is a component that we want to give access to this name value so here's what we do the first thing we have to do remember we exported that name context object well we're gonna import that into child's you because child 2 once they have access to it we have to bring that in as a named export so we're gonna put it in curly braces import name context from app and now here's where we make use of the actual hook the use context hook we're going to import react and then in curly braces we're gonna bring in use context now within our function we're gonna call use context that hook and pass it the context object that we want to make use of which in this case is name context and that's going to return to us the value that we passed in here so let's save this into a variable or console call Conn stain and that should be all that we need to do to have access to this name value so let's come into child 2 here and let's verify that it works let's make an h1 and let's say name and then we'll say from child 2 just to make sure that we're actually calling them from child 2 let's save and flip back to the browser and there we go Greg from child 2 so what you can see is that we've gained access to this name value even though we didn't pass it down as a prop through child 1 child 1 here has no reference to that name value coming from app and we've avoided cluttering up child 1 with some unnecessary props that it doesn't really need anyway and you can see now that no matter which component ring as long as it's wrapped by this provider we can now have direct access to the value from the provider the other thing I'll mention is that whenever this value is changed that will trigger a rerender so right now we have this as a default prop but let's say that this was actually part of the state and at some point that state changed and the name was updated in some way well child 2 here will be rear-ended with the updated name so thanks for checking out this video on use context I hope you got something out of this video if you did please give the video a like and consider subscribing to the channel so I can bring you more videos just like this see you next time

Channel: The Code Creative

Views: 4,237

Keywords: javascript

Id: Hu5lB21Wf5k

Length: 10min 0sec (600 seconds)

Published: Sat Feb 22 2020