React Hooks Make Using Context 10x Better

I'm in the process of creating this really excellent react app but at the moment I'm running into this problem I want to greet the currently signed in user and I know that I'm going to be storing my user data within the app class however I need to find a way to get that data down to the navbar component so to create a place where I'll be able to store my user data I need to create some state and on my state object I'll create a user property which is going to hold on to my user and let's say I have the user Dave so I need to get Dave down to the navbar component if you've been working with react for any period of time the first solution of this problem that you'll likely take is to use props so we can create a user prop on the navbar component and set it equal to this state user to get our user value then we can access the props object within navbar and then we can replace the hard-coded user value with the dynamic value props dot user and now we're greeting Dave in the navbar we could also make this syntax a bit cleaner by D structuring the props object just grabbing the user prop and then just interpolating the user value like so so that's a straightforward solution to components that aren't nested very deeply but what if for example our navbar was within our main component so I'll remove where we're displaying the navbar in the app class and we'll just return the main component and we'll put navbar within main first by adding a set of fragments and displaying the navbar above our main content here if we were to solve this problem once again using props we'd first have to create a user prop on main then we'd need to grab the user prop from the props object within the main component create a new prop on navbar and then continue to pass it down from our navbar props all the way to our span this isn't a very elegant solution you can see that we're replicating a lot of our code by having to create another user prop in order to get our user data down to where we want and note that the main component is not making use of the user props whatsoever it's completely bypassing all of the content here where it doesn't use the user data and takes an indirect path to our navbar this process of creating many props on multiple components to get where the data needs to be is called props drilling and it's generally a pattern that we want to avoid so how do we get data down to deeply nested components I'm just going to remove the two props that we created a more elegant way of passing data from parent components to nested child components is to use react context so to create a new context we can use the react import and on it there's a method called create context and when we execute this method will be returned both a provider and a consumer the provider and consumer will be properties on an object so we're going to call this object user context and the first step is to grab the data and put it on the provider so to setup the provider we can wrap it around our main component where it's being returned within app so we'll create a set of user context provider tags then we put the values that we want to pass down on the value prop in our case that's this dot state dot user then to receive that value or values we use the consumer and we just need to head down to the component that we want to consume that data so we'll add a consumer with a set of user context consumer tags around the return markup within now bar and then we'll get this error telling us render is not a function what we need to do now is to create a function within these consumer tags in order to receive the data that's being passed down on value this function is what's known as a render props function so the first step in creating this function is to wrap our nav tags with a set of curly braces then we can write our function just as an aero function you can write this function in it in any way I'm just choosing to write it as an arrow function and then within the parameters of this function we can grab the value so to be precise there's just one parameter of value and then once again we can interpolate within the span value and we see in our navbar hello dave react context provides a great solution to this problem however using react context isn't perfect for example using the render props function might be a bit unusual to you it's not perfect to have to return in two places first returning in the render process function all the markup and then returning the entire consumer with the render props function it creates this kind of pyramid pattern and try to imagine if you've setup multiple contexts within your application what if you need two consumers within the same component this can lead to a highly nested structure and can lead to some false hierarchies for example when you look at a couple of nested consumers you might think that one consumer relies upon another so it's not great for code readability you might be asking if there's a simpler approach to using the context API and in fact there is with the introduction of react hooks in the alpha version of react 16.7 we have a new feature or hook that we can use within function components like the navbar component which allows us to use context in a much more readable manner in the name for this is use context so we'll bring that in up at the top after our react import and keep in mind if you take a look at this code sandbox that I'm using the alpha version of both react and react Dom so once we bring in the use context hook we can keep our provider but in order to consume context instead of having our render props pattern with our to consumer tags we can remove all of that and for now just go back to hello user within our span and up above our return within navbar we can consume context by calling use context and passing in our entire context object so in our case we want to read from user context and we get back the entire value prop or all of the data that was put on the value prop then all we have to do to read from it is just interpolate value once again and once again we have our greeting so with the help of the use context hook we have a much more readable simplistic and flattened approach to reading context to consuming context and if we wanted to pass down more data say for example instead of just a user property we had a first name property and a last name property say the last name of our user was Thomas we could create an object within our value prop so add another set of curly braces add first name and last name to it both as the property name and value we'd need to first D structure first name and last name from our state object within our render function and then we can head back down to our nav bar we can D structure the two values first name and last name from our value prop and then we can display our user's name by interpolating first name and last name like so so as you can see the use context hook makes it very easy to start working with the context API you might have looked at the context API and found the appearance of the render props function to be somewhat off-putting or strange-looking so start using use context today and I've created a code sandbox for you at the following link so you can play around with this example and become more familiar with it if you're interested in react hooks I'll be releasing many more videos like this in the near future if you found this video useful give it a like if you really liked it subscribe and I'll catch you in the next one

Channel: Web Dev Hero

Views: 53,846

Rating: 4.9643579 out of 5

Keywords: react, react hooks, react 16.7, react.js, usecontext, react context, react context api, react context tutorial, react usecontext tutorial, react usecontext hooks, react hooks context, react hooks redux, react hooks tutorial, react context state, react context hooks, react context hooks tutorial, react tutorial 2019, React Hooks Make Using Context 10x Better, react hooks make using context 10x better, react 16.8, react 16.8 tutorial, react 16.7 tutorial, context api, context

Id: cBM5xXyekmM

Length: 8min 49sec (529 seconds)

Published: Tue Jan 01 2019