Context API and useContext hook tutorial - ReactJs

okay guys so welcome back again so in this video let's learn about the context api and the use context hook so firstly we'll understand that what global status and what context api is used for and then we'll understand some fundamentals like lifting up the state and prop drilling and then we'll move ahead and we'll create our context using the context api and then we'll use the use context hook to consume that api so in case if you already know that what global estate is what lifting of the state means what prop drilling is then you can directly skip to creating the context and using the use context hook but for all those who doesn't know about the above three should stay with me and let's go for a smooth ride okay so here i've created a very basic react application and we only have this app.js file and this index.js file so firstly to understand that what global state means we need to create a couple of components inside this components folder so currently it is an empty folder so let's create a couple of components so let's create a new file and let's call it component a dot js and similarly we'll create two more components that is component b and component c so now let's fill up these components so i would be using rfc to create a functional component here and let me provide in a heading here that says component a like this and the similar thing we would be doing inside other components also that is creating the basic components so now our components are ready so now what i want to do i want to go up to my app.js file and what i want is that that i want to import these two components that is a and b inside this file so let me import those components or if i start typing here that is after the h1 here they would be automatically imported because of vs code so component a like this and then we would be importing the component b here like this and if we save our application we see that we get component a and component b and these files have been automatically imported and now what i want is that that component c should be the child of component b so let's go to component b here and here i would provide in the component c here that is component c like this and this component c has been automatically imported here so now let me save this so now what we have here is this that inside the parent app.js file we have two child components that is we have component a and component b and inside the component b we have this component that is component c as a child of component b so now suppose we have something here that is we have some state here so let's create a fake state here so let's say that we are using a state variable here that is use state name set name and the initial state is truly methyl like this and of course we need to import user state here from react so we can simply say use state like this and now we want to display this name inside component b so what we can do we can simply type here or let me put a paragraph here we can say name is something and that's something we can write a jsx expression and we can say name so if we save this we see that we are getting name here inside component b and now what if we want the same state variable to to be available to component c so what we can do we can go to component c here and here we can accept that name name state as a prop inside this c component so what we can do we can simply do it like this that is name equal to this name like this and now we can go inside component c and here we can simply display the name that is name like this but firstly we need to extract it from the props because props contain the name variable so if we save here we see that component c we have the name here now what if inside component a we want to have the same state variable that is this name but as we see that inside app.js component a and component b are siblings so what we can do we can simply cut this state out from here and we can directly paste it inside our app.js file so if we are able to paste that state inside this app.js file then we can easily pass that name as a prop to this component a and component b and then we would be getting name inside each of the components so this thing is called lifting up the state so if we cut this state out from here so let me cut this state out from here that is from component b and now let's go to app.js because we want the name inside component a so therefore we need to provide in a state here and thus we have a global state here but what we need to do we need to pass this name as a prop to component a and component b so we can say in component b that name should be equal to name like this and now we need to go to component b to extract it out of the props so we can simply say name here and now everything looks fine but we need to import user state here inside app.js file so we can simply say import use state from react like this so if we save this everything works the same way and now if we want this name variable inside component a and that was the only reason because we lifted up the state from component b inside app.js file so that we can provide the same state variable inside component a so here we can also do the same thing that is name should be equal to name bypassing name as a prop here and now if we go to component a and here we can extract that name as a prop here that is by using the structuring here and here we can simply type out the name here that is name should be name like this and if we save this then we see that our component a also receives truly methyl so now what are we doing here so basically we see that is from component a first we lifted up the state since we want the state variable to be present inside the sibling components that is component a is a sibling of b therefore we lifted up the state and now what we started doing we started passing this name property or this name value or this name state variable as a prop to component a and component b so that's what we are doing here and now if we look inside this component b we see that we are passing this name property of component b to the name property of component c and then we are utilizing that name property in component c as the name here but what if the name is not even required inside this component b so now let me simply comment this thing out from here that is we do not want to display this name inside component b so here what we are doing though component b doesn't even require the name property but still we need it from the app.js file as a prop here because we needed to pass it to component c because component c is a child of component b so therefore what we are doing we are simply drilling the prop from one component to another in the tree of components so this is what is called as prop drilling this is what is called as a global state because now each of the components inside this app component can have this state variable that is name and we already saw that what lifting up this state means so now comes to the point that what is a context api so basically context api is an easy way to create global variables that can be passed around in the react app and this is an alternative to prop drilling so now let's see that how do we use the context api and how do we use the use context hook to consume the context so for that what i am going to do i am going to create a very simple component that is a counter component with two buttons that would increase the count and then that would decrease the count so firstly what i am going to do i am going to remove all these components here from here and then let me remove all these files from here that is we do not require these components anymore here they were only for explanation so let me remove this thing this thing from here so now let's go to insider components and let's create a new file and let's call it my counter dot js like this and here let me quickly scaffold it by creating a functional component here that is called my counter and inside here what we want to do let me firstly display an h3 here that is counter component like this and now let me describe our count variable here that is use state and the count would be count set count would be set count and the initial state would be zero one now we need to import user state here because we are using user state here like this and now we can simply display the count count here so in the paragraph tag so we can simply say count is this count like this and now if we save this nothing would happen and let's go to our app.js file and now let me import that component that is my counter like this and it automatically imported from the components folder so if we save this we are getting an error because of something so let me refresh this page here so we see that we are getting this counter component that is my counter here and the count is zero so now let me quickly create two buttons here that would increase the count and that would decrease the count so here let me create a button so button would be increase count and the second button should simply say degrees count like this and then we have an onclick method on each of them and here we would have a function that would be called increase count and this function we will be creating in a moment and for the second button we would be having another on click event and that would simply call this function that is decrease count and now let me create these two functions here at the top of this component so here we should say or let me simply call it a function here that is function increase count or let me copy it from here like this and this will do something and then we have another function here and that function should be called decrease count so let me paste in the function name here like this and now what this function should be doing it should simply set the count to something that is to count plus one simply like this and here we would be having another function that would be setting the count to count minus one so now if we save this we see that we have these two buttons here so if we click this button we are increasing the count if we decrease the count we are decreasing the counter so now what if we want this count that is this count variable to be available inside this app.js file that is somehow we want this count variable to be present inside this app.js file that is we want to use this state variable that is this count variable to be present inside our app.js file we already saw that we can lift up the state we can lift up all the functions and then we can pass this count variable as a prop and these functions as a prop to this my counter thing and then we are good to go but this is not good if you are having a real world application because you might be say 10 to 5 components down inside your component tree and then you want to lift up something so it would be very tedious for you to lift up the state and then pass each and every function and each and every variable as a prop using prop drilling so what we can do we can use the context api to create a context for this count variable and then we can use that context to get the value of this variable and then these functions by using the use context hook so for that what i am going to do i am going to go inside my source folder and here i am simply going to create a new folder and that would be called context though it is not required but i prefer doing it this way that is to keep each and every context inside this context folder so and here now i am going to define my context file here that would be called counter context dot js like this and here firstly we need to import something from react so we can simply say import from react like this and what we want to import we want to import user state we want to use create context and now what we can do we can simply create a context using this create context so let me minimize this thing here so firstly we should say const counter context equal to create context like this it is as simple as this to create a context and now we need to do something more inside this file that is we want to build a function that is a provider for this counter context so we can call that function anything but here i am simply going to call that function that is counter context provider so we can say counter context provider and basically as the name suggests it simply provides a context that is the current context inside this file so we can have it like this and now we need to return something from this counter context provider function so we need to return something so let it be this way for now and then what we can do we can simply export this counter context provider as the default value so we can simply say export default counter context provider like this and then we also need to export this counter context to be used by the use context hook so either we can do it right now or we can leave it for later but it is better to do it right now so that we should not forget it that we need to export this counter context from this file and now we need to return something from this function and what do we want to return we simply want to return the provider of this counter context this is only a name of the function this is not an actual provider but inside this return statement we would be returning an actual provider of this counter context that we have just created here so what we can say we can say counter context dot provider like this and then we have this thing here and now what should be between this thing here here we can simply say props dot children and stay with me and it will all make sense and now from where props will come props will come from here because we can simply take props as a value in this counter context provider and here inside this counter context provider we can pass in a value here and that value would be something that would be of use for us so value would be equal to something and now since we are interested in extracting the state and this function out of this comma counter file so that they can be used anywhere inside our application so what we can do we can simply cut this state and these functions from here and now we can go to our counter context.js and here we can simply paste in those functions and that state variable that is the count and the set count so what do you want to pass in this value thing here you can pass in each and every value that you want to be accessible by any of the other components that use this counter context provider or that are a child of this counter context provider so here what we can pass we can simply say count because we want this count to be accessible by any component in our component tree we also want the increased count method to be available to any component we also want to make this decrease count method to be available to all our components so now let's save this or instead of passing in value and an object here what you can do you can simply create your own values object here or value object here and you can simply paste these things from here that is let me cut it out from here and let me paste it here like this it remains the same thing and you can simply pass in the value here because it is much more easier to read so now everything that needs to be done in this counter context.js file has been completed so now let me save this file from here and now let's go to our app.js file and here we need to import that counter context provider so we can say import counter context provider from we need to go inside the context folder and then we need to use this file that is counter context like this and now you need to wrap each and every component inside your application in which you want to use these things here that is you want to use this state variable here you want to use this increased count function you want to use this degrees count functions so let's go to our wrap.js and here we can wrap each and every component inside this counter context provider so we can say counter context provider like this and then we can wrap this thing inside this counter context provider and now how to consume the values that are provided by this counter context provider we can go to our my counter dot js file firstly we need to import the use context hook because we are using the context here and then we also need to import the counter context so we can say import we need to go inside one up folder and then into the context folder and then we need to import the counter context and from this counter context we simply want to import this counter context and now here we can say const something equal to use context and here we need to provide in the counter context like this and what do we have here we have each and every value that is being provided by this counter context provider that are these values that is the count increase count and decrease count so even if we copy this thing from here that are these things and if we go to my counter dot js so if we paste them here and if we save our application our application would be working as it was working before when we had the state variable and these functions inside this file so if we click on increase count we are able to increase the count if we want to decrease the count we are able to decrease the count but now let's see the beauty of this context api so now let me create some more components here that is let me create a component here that is component a dot js and let me create another file that is component b dot js like this and now inside this component a let me create a functional component and this component a should only display the value of the count so let me give it a style also so that it should be visible to us that is background color to be something and that should be wheat and here we can simply display in the paragraph that is count is something and here we can more here you want the count so what we do here we can simply say import something from we need to go inside the context thing here that is the context the counter context and we need to import this counter context here like this and we also need the use context hook so we can say use context like this and here we can use that use context hook so we can say cost something equal to use context and here we want to provide in the counter context like this and since in this component we only want the count thing here so we can simply extract the count here like this so now if we save this file and if we include this component inside our app.js so let's include that thing here that is component a like this so if we save this file we see that cannot resolve this thing here so what is the problem so let's go to this file here so it's because of the space here so if we save this we see that we are getting count as minus six so if we increase the count we are able to see that the changes are available in my counter.js file as well as in this component a because this count 3 is coming from component e so now let's use this component b as a child of component a so let's create this or let me simply copy this component a from here let me copy that from here and let me paste it here inside component b and the name should be component b and here we need to export component b and here instead of this p tag here what we want to have we want to have a button here so and let me also change the backlog background color to something that is red and here we want to have a button and here we want to simply say increase count so increase count like this and then we have something on click that is on click equal to something and here inside this component b we do not want the count variable here but instead what we want we want this thing here that is to increase the count so let's copy this thing from here let's go to this thing here and instead of extracting count we can extract this thing here that is increase count and here inside the on click event we can pass an increase count so now let's save this and let's go to app.js file and here inside this component a let me paste this component b as a child of component a like this and now if we save this we have this component b here which is a child of component a and if we increase the count the count is increasing we are here we are able to decrease the count and if we try to increase the count from this count component b we are also able to increase the count so we see that we haven't passed any prop here from component a to component b as we can see here that are no props have been passed and neither from my counter.js file no state has been uplifted to this app.js file but instead we are using the context api to provide in a global state for our application and now the last thing of this video and this is a bonus of this video that is if you go to this my counter dot js file we see that we are importing use context from react and counter context from this counter context.js file if we go to component a we again we are importing use context here and then we are importing counter context and if we go to component b we are again importing the those two things here that is use context and counter context so what if we can make our lives easier and instead of using the context here what we can do we could create a custom hook inside the counter context.js file so now inside this file that is countercontext.js we are going to make our custom hook so instead of exporting this counter context we want to export our own hook that is use counter and that is the name of our hook and you all know that all looks start with use so instead of exporting this as a constant here what we could do we could export our constant hook here that is const use counter equal to a function here like this which returns something and since we only have a single line in this function so we can simply write use context like this and here we can pass in the counter context that is this counter context and this use context has been automatically imported here from react and now we need to export this so we can say export const use counter and now wherever we are using this counter context we need to use this hook that is use counter so we can copy it from here let me save this file from here let's go to component b and here instead of importing counter context let me import this use counter and now let me also remove this thing from here and here instead of using the use context what we can say we can simply say use counter like this so that's all what we need to do and now let's do the same thing in other files also so let's go to component a so instead of importing use context let's import use counter like this and now instead of using use context let's simply use this use counter like this and now let's go to my counter.js file and again let's remove this thing here and let's use the use counter hook and now instead of using the context here like this what we could do we could simply say use counter like this and everything should work the same way as it was before so if we save this and now if we increase the count the count is increasing we can decrease the count and we can also increase the count from here but i hope that this is a much easier way that is by creating your own hook inside the counter context and then you can use that hook inside any of your files and this looks much more cleaner to me than using use context here and then providing in the counter context here so guys that's all about this video so if you like the video do hit the like button if you haven't subscribed to our channel do subscribe to our channel so thank you bye tata take care and have a good day and have a great day

Channel: yoursTRULY

Views: 6,794

Rating: 5 out of 5

Keywords: usecontext react, usecontext, usecontext react hooks, usecontext usereducer, usecontext hook, usecontext vs redux, usecontext in class component, context api react, context api, context api react hooks, context api tutorial, context api react class component, prop drilling in react, prop drilling react hooks, prop drilling vs context, prop drilling example, prop drilling problem, lifting up the state, lifting up state react, lifting up the state react hooks, Yourstruly

Id: ZBZ6BqoUDsU

Length: 25min 16sec (1516 seconds)

Published: Wed Feb 10 2021