Learn React Context in under 15 minutes!

there's an ever-growing number of ways to manage state in your react application obviously you have the built-in use state hook which if you're using functional components is pretty much it when it comes to component level state management if you want state management for your entire app well you've got a few decisions to make you can look at heavyweights like redux the senior citizen of react state libraries or libraries such as mobx malbec state tree react query xstate recoil and sustant or you can just use context which is built into react in today's video i'm going to give you an overview of context and its accompanying hook use context but before i do for anyone new to react a reminder of what state actually is state is basically a plain javascript object that stores data relevant to the current state of a component an example of this might be a login form you have a username field a password field and a submit button the values that you type into the username and password field might be stored in local state ready to be sent to the server when submit is pressed now password fields should mask the password but sometimes they have a little icon that allows you to show or hide the password you've just typed in this would be controlled by state you might have a show password boolean stored in state the default value of false and when you click on that icon it'll toggle the value from false to true and you can then use that boolean to show the password in the password field application state or global state is state that is used by multiple components throughout the app such as the current logged in user or the theme being used okay back to context and let's take a look at some code okay so i have a very simple react app here and as you can see i have one input field with a business name when i change that business name it'll reflect in the title here and it'll reflect in the footer so if we look at the code we've got business name set in state and when i change the value in the input it takes it from the event target value and it sets the business name in state then i'm taking the business name and i'm passing it into the title component and i'm passing it into the footer component so these footer and title components are very simple you can see that they take one prop and it just renders the business name and the same with the title takes the one prop and renders the business name so we'll just see here quickly if i delete you can see here that it's updated at the title and it's updated in the footer so that's one way to obviously manage your state now we're going to convert this over to using context instead this particular example is very simple example but when you have an app with components that are further apart or nested pretty deep then you're going to find that passing props down doesn't always work or it can just get pretty messy okay to set up context we want to create a context file so i'm going to go here and i'm going to create a file i'm going to call it business name context dot js and inside i'm going to import react from react and i want to create business name name context react.create context and then i'm going to pass it an object and down here i'm going to export defaults this is the context inside this object i'm going to specify what values i'm going to be storing inside of context so the first value is business name and that's going to be a string the second value is going to be the setter so this is how i set the business name inside of context so i'm going to say set business name and that's going to be a function i'm just defining an empty function here because inside of this create context object i'm basically kind of just setting the types i'm not actually setting default values and i'll show you where i do that next so i'll save that and then we want to go into app and i'm going to import business name context and then i'm going to wrap the home page component here with the provider that comes from the business name context so we're going to do business name context.provider and down here we're going to close business name context.provider and it's from here that i'm going to now pass in the default values so i again we saw i want a business name and i wanted a setter so i need to now create that business name and the setter so i'm going to start by importing use state from react i'm going to go business name set business name use state and then provider takes a value which i'm going to pass in as an object containing business name and the setter what we're doing here is we're actually passing in the default value of business name and we're passing in the function that we're going to use to set that default value and as you can see business name is just an item in state inside of app and set business name is the setter that comes with it so i'm going to save that and then if i go into the home page i can again import business name context and to actually read the context i need to import the use context hook and then here is where i was originally setting the state what i'm going to do is change this to use context i'm going to delete this and instead of the default value as the argument we're passing in the context that we created inside of business name context so business name context and you might remember if we look at it again we created an object with business name and set business name so i'm going to change this destructuring from destructuring an array to destructuring an object and if i save that you can see now that we get the default value of dunder mifflin which we're using in this input and we're using it in this footer so if i change this to random hog it updates it here and it updates it there so i don't need this use state anymore so what that's doing is it's using the set business name setter from here which is then stored inside of this context and the value it's using is business name which comes from here and is stored inside of this context so i can log this out and we'll have a quick look here that if i'm to change anything it gets logged out in the app file so you can see it's just simply state that's in the app we're then using context to access that state and to access the setter in that state and we can go further with this context instead of passing business name down as a prop which isn't a big deal because we're only passing it one level down here to title and one level down into footer but if you've got a component that's nested six levels deep and you want to pass a value from this component six levels deep instead of passing it through every single component in that tree you can set it in context and then access it from context so to show you how that's done we're just going to do exactly the same thing here so i'm going to copy this and i'm going to go into title i'm going to import the context i'm going to import use context and i'm going to copy this line and delete the prop because we don't need to take that prop anymore paste that in and we don't need the setter so we just need to destructure business name from that context if i save that i've got an error and that's just showing that i've got the import path wrong so i'm actually one level up so if i just change that to two dots save it again and now you can see that the business name has been passed down into the title component so it still works as expected so i can now delete business name from here and i'm going to do the same for footer so delete business name and you can see once i do that the business name disappears from the footer but i can then import business name context import use context delete this prop because it's not being passed in anymore i can say context business name equals use context and pass in business name context and it comes back into the footer so that's how context works but as you can see if you're using a context a few times throughout the app it gets a bit tedious importing use context and then importing business name context and then doing this dance down here so you could create your own custom hook so i'll show you how to do that real quick so i'm going to go into the source folder again and i'm going to do use business name context it's a long hook name but it's descriptive so here i'm going to import use context from react i'm going to import business name context i'm going to create the react function which is the hook so use business name context i'm going to export that as the default then what i'm going to do is i'm going to the structure business name and set business name from use context and pass in business name context so this is the code that i've written three times in all three components i've imported this three times in all three components and i've imported use context all three times in all three components so what i'm doing here is i'm destructuring it from use context and then i'm going to return the same object so business name set business name i'll save that so now inside a footer i can delete this and i'm going to change this to import use business name context and you can see that still works in the footer the business name is still fully functional so i've created a custom hook to manage this context in this case it's just removed one extra import of use context and you might find it just a bit simpler to do obviously this is a simple example of a custom hook but it just shows you how you can simplify things a little bit and so we'll quickly do the same thing in here so i'm going to change that to use business name context copy that delete that delete that and we're going to go into the title as well just quickly change these use business name context delete that and the app is still functional so just to recap i've created my context file which contains an object of a business name and a set business name now as you saw that we're passing in the value of this object into the provider which means that these values don't actually do anything i could actually delete this altogether and everything would still work as expected but i find personally it's good practice to do this here because you're kind of setting up the types that you're using so it's a way to kind of look at the context and go okay what do i expect that i'm going to be using in here i know i'm going to take a business name which is a string and i know i'm going to take a set business name setter function so like i said because we're passing in the default values here and we're setting the default value of business name to dunder mifflin in the state um these values don't actually do anything but it's it's kind of documentation that's built in in a way if you do it that way so as i said we set this up here we then create a state value of business name and the set business name function and then we import business name context into the app and we wrap the homepage component in a provider that we get from business name context and then we need to pass in a value which i've passed in as an object containing business name and set business name and then now we have this used business name context hook which imports use context from react and we also import the business name context we pass that into use context and it gives us the object that we have set inside of business name context and we're then destructuring that to get business name and set business name and inside of this hook we're actually just returning the values that we got from context which allows us to do something like this without having to import use context and without having to import the actual context file and passing it into use context hook now a couple of other things to consider when using context don't try and squeeze too much state into one context instead create multiple contexts and render the providers only where you need to and that leads me to my second tip only put a context provider as high up the tree as necessary in other words don't put your context provider in the app file if it's only being used in components four levels deep okay hopefully you learned something today if you liked the video please hit the like button and also subscribe to the channel happy coding and i'll see you next time

Channel: Ian Lenehan

Views: 152

Keywords: react, react context, context, javascript, programming, coder, web development, software developer, hooks, custom hooks, react hooks

Id: 5v1NUQbB6g4

Length: 14min 14sec (854 seconds)

Published: Fri Sep 24 2021