Learn React Hooks: useContext - Simply Explained!

what's up guys there's cousin here welcome to another great react tutorial in this one we're going to talk about the react context API use context create contacts all of that good stuff make sure to watch until the end of the video because if you do you probably will never have to watch another video on context ever again so let's get into it cool so context in react honestly the simple way for you to think about this is just think of it as a way for you to store data any kind of data and have it be accessible to components no matter where they are in your application in the tree even if it's for the entire application to have them access that data without having to pass it through props one of the biggest mistakes that I see a lot of react developers doing in something that is very common to make as a junior developer is to have these long chains of props that we call prop drilling to get data from one component to another so really the way this looks like is you have one component that has some piece of data you pass it to the next component which then passes it to the next component and so on you end up having these long chains of props and it becomes really messy and hard to maintain as a code base so context is a way to avoid that is a way to have some state that is accessible by multiple components without having to do all of this prop drilling all of these chains of props so what we're going to do now is we're going to look at an application we're going to look at this problem and how to fix it with context so I have here this simple application which only has a user which has a property is subscribed and the name is you and the reason it's here is because did you know that over 85 percent of you watching this video right now are not subscribed which is really interesting because you're here you're watching a tutorial on react you're learning a lot and you're not subscribed odds are so I put here subscribe true with the hopes that now by now you're already subscribed so if you're not make sure to tap that subscribe button because it really really does help me out a lot so we have this user that is being passed here to dashboard dashboard receives users so let's look at dashboard dashboard is a very simple component it receives the user as props and then it passes it on to sidebar and to profile the profile and the sidebar are simple components that take in the user and then just return some HTML to display the user there's nothing too fancy the problem really is this dashboard component you see this dashboard component takes in this user as props but doesn't actually do anything with it the only thing that it does is it sends it to sidebar and it sends it to profile so now let's look at how we would solve this with context so remember I said that context is a way for you to have data that is shared that is accessible across different components without having to pass it through props so that's what we're going to do the first thing we're going to do is we're going to get rid of these props from dashboard because that's what we're trying to achieve we're trying to remove the props so dashboard will no longer have this we also have to remove it here from the types and we have to remove it here as well now you're going to see that sidebar and profile are complaining that we need the user which we don't have but that's fine because we're also going to remove the user from here because again the goal is to not have to pass the user the goal is to have the user accessible from anywhere in the tree without having to pass it around so sidebar and profile will no longer receive the user as props which means that we have to get rid of it here we have to get rid of it here and then we have to get rid of it here and we finally have to get rid of it here so now we have some components that need a user but there's no user anymore the user is lost right that's okay because we're going to fix that right now with context so what we're going to do is we're going to create a context have it hold our user and then wrap everything in dashboard with that context and then everything inside of dashboard which means all of dashboard and the sidebar and the profile and any further sub components that can arise out of it will have access to the user directly without it having to be needed to pass through props so what we're going to do is we're going to create a new file we're going to call it context.ts dot TS and then I'm going to close this so that you can see and then what we are going to do is we are going to create our context so what we'll do is we'll do export const dashboard context because that is the context that we want to make it's the dash per context and that is going to be equal to a function from react that is called create context create context and then I'm going to import it here from react and then yeah that is how you create a context now this context says that it expected one argument but got zero because it needs a default value so for it to have a default value we have to initialize it and I'm going to do first of all undefined and then we are going to add something to this context because right now there's no type information about what kind of value this context can have if I hover over this you're going to see that it's a context of undefined but that's not true that's not what we want we want to hold the user here so the way you do that is you open here a carrot like this and then you put user and then we're going to import user from actually it's from here we're going to import user and then we have to also do undefined like this so what we've now said with this context is we want to create a context that can be a user or undefined now why undefined this is a bit of a tricky part and you really need to spend a little bit of time and listen carefully to properly understand this but ideally our context is going to hold a user it shouldn't hold anything else but a user but because of the fact that we have to create the context here in this file outside of any component outside of this component for example we do not have access to the user at this point right if I wanted to do something I don't have access to the user the user is in the state here it is localized inside of this component and so what we're going to do is we're going to assign the user to our context but initially our context is going to be undefined we have no way around it which means that we have to type this as being either user or undefined and this is going to be very important a little bit later on in the video because we're going to have to do something to account for this possibility of it being undefined but let's not worry about that for now let's just create and wrap our context wrapper dashboard with our contacts so now that we have the context what we can do is we can come here and we can do dashboard context and then we can import it here let me just uh fix these Imports right here because it'll be a bit simpler and then we want to create now what we call a provider right we have a context so now we want to provide it to a certain set of components so the Syntax for that is dot provider right and then we're going to open this and then our dashboard is going to go directly inside now vs code is telling me that I'm missing something and it's saying that property value is missing in type it's because we have not given it a value right we said that this context can be a user or undefined but we haven't given it any value so how we fix that is we do value and then we pass it our user here right that's how we now get access to the same user that was previously passed down through props now we get access to it through this dashboard context.provider so that is going to be very useful now if we go back here we don't need to do anything to dashboard besides maybe remove this unused import because dashboard no longer needs to have the job of taking the user and passing it now to sidebar what we can then do is go to sidebar and here instead of having user which instead of having user getting passed through props we can actually remove this we don't need this we can get the user directly from the context so the way we do that is we use a consumer right initially we created a provider of the context and now we are going to consume that context and the way you do that is with a handy Hook from react called use context so what I'm going to do is I'm going to do consc user equals use context from react and then I'm going to give it dashboard context and then again apologies for this but we want to do an import like this and then we have our user here and what I want to do here is I just want to place it as well to profile and now we have access to our user directly inside of our component without it having to be passed to dashboard dashboard no longer cares about user which is great because it doesn't need to do anything with it we've completely bypassed having to pass this value around through props and now we have access to user here through this use context which is using the context of dashboard context which we know is a user or if you're astute user pipe undefined so this is a problem this is a problem that we have now user here can be undefined the reason it can be undefined is because we've typed it as being user pipe undefined user or undefined and even though we have set the user here and we know for ourselves we know that this user is always going to have a value in this context we cannot guarantee that for example someone forgets to wrap the dashboard in a context provider and then these components here try to access a context and it ends up being undefined we cannot guarantee that and that could happen a developer could come in and forget to wrap the necessary components in a provider and remember the way context works is everything that is wrapped inside of this provider has access to that value which means that they can use this use context if it's not wrapped or if you try to use this use context anywhere else where it's not with the the appropriate provider you are going to get a value of undefined that is how react works right and we need to deal with this we could we can just ignore this right we could put a question mark here we could put a question mark here right that would solve the problem it would no longer throw any errors and it would render out normally in the UI but that is not the best approach because for one we have to put all of these question marks everywhere which is a little bit dirty and we don't really want to do that and in any case where we forget to wrap the context properly we're just not going to see anything here because this will evaluate to undefined if user is not there and that it will just render render nothing it will not throw an error it will not let us know that something is wrong and it's going to make it much harder to debug so we need to figure out a way to not use these question marks and to get this user to always be defined and handle that logic elsewhere so that's what we're going to do now what we're going to do is we're going to create a custom hook that is going to handle this Logic for us and always return to us the user if it is there and then from that we can use this hook in all of our components and get the functionality without having to put all of these question marks or do any extra logic this hook will handle all of the logic for us and it's going to be reusable across any parts of our application so we're going to come here and we're now going to create that hook so what we'll do is we'll export a new function called use user context this is what we're going to be used this is what we're going to use in our application to handle this and then that one is going to return it's going to do this what we're going to do is we're going to take this user from this use context that we have here we're going to take this logic because we want to reuse this logic across components that is why we're extracting it in a separate hook so we're going to put it here we are going to import use context we're essentially doing the same thing that we did here just in a custom hook which is going to be useful now this user has the same thing has user or undefined and now we're going to handle this case here what if user is on the find what do we want to do well what we want to do is we want to first check if user is on the find so if user undefined and then what we want to do here is we want to throw an error if user is undefined because we know that we have provided user here and we know that for ourselves so we don't expect an error here we expect the user to be there however like I said we cannot guarantee that this will always be the case we cannot guarantee that another developer or even us in the future might forget to do that and for for that reason or any other reason user might be undefined if that happens we want to throw an error we want to be aware as the developers that something went wrong that we forgot to do something and so we want to throw an error if we didn't throw an error like I said before we might not realize what actually is going on so what we're going to do is we're going to throw new error and then we are going to say use user context must be used with a dashboard context so now if we ever find ourselves in any situation where we forget to do this and then we try to use this hook and user is undefined our application is going to throw an error we're going to know about the error and we're going to say oh we forgot to do this and so we're going to go and fix it and deal with our error that is the way that you create custom Hooks and that is the way that you use context with a custom look and then the last thing that we need to do is we need to return the user right so this hook as you can see here it returns a user and if we get to this Line to Line 14 then that means that user was not undefined so our error did not throw and here we are guaranteed that user is always going to be user and it's never going to be undefined that is what we want out of this hook and with this we can now come into our sidebar and instead of use context we can just do use user context do that and then we can replace it here as well get rid of this context and then get rid of this dashboard context because again everything is extracted in this custom hook which does all the logic for us and then in our component we have user here which is a user it's no longer undefined we no longer need to add any question mark and we can render our UI exactly how we want to this is the power of context and this is the power of custom hooks cool so there you go that was the react context API I really hope that you've understood this I really hope that you now understand how to use context how to create your own custom hook with it please do take a moment to really go through this video once again and really just make sure that you understand this because this is very important and also understand and do more research about when to use context versus when to use a state management library and try to see if you can find any library or any part of your code that could use a context and try applying it this is a very useful feature of react and it should be used when it's necessary so if you've enjoyed this video one once again please do subscribe to the channel because it really does help me out a lot it shows me that you enjoy these types of videos and that you want more and I will make more don't worry also leave me a like for the YouTube algorithm and yeah my name is Bender's cousin this is cousin Solutions thank you once again for watching and I will see you all in the next one ciao

Channel: Cosden Solutions

Views: 76,844

Keywords: react tutorial, react crash course, react developer, learn react, react hook, react hooks, react hooks tutorial, programming tutorial, react hooks explained, computer science, tutorial for beginners, react component, learn programming, web development, frontend development, coding for beginners, simple code, easy programming, useContext hook, useContext tutorial

Id: HYKDUF8X3qI

Length: 15min 46sec (946 seconds)

Published: Thu May 25 2023