useContext hook in ReactJs Tutorial | Complete React Course

hello everyone and welcome back to the channel I hope you all are doing absolutely well so guys in this video we are going to talk about use context hook in reactjs so guys we were learning uh context API from last two videos if you haven't checked the videos I will provide the link to the videos in the I button please make sure to check those previous videos too so in the previous videos what we have discussed was what was prop Drilling and then how we have solved that problem of prop drilling using context API now when we learned context API in that we understood that there was something called as context. consumer through which we were consuming our context value now in order to solve that problem and complexity of context. consumer we have a hook that is called as use context hook that we are going to see in this video so basically these are the four steps that you are seeing on the screen right now we are going to cover this in detail in this video so before starting the video if you are new to the channel make sure to subscribe to the channel if you haven't done yet also I have created a complete playlist on reactjs make sure to check that too let's start from scratch and quickly understand what is prop Drilling and what is the problem that do we have in prop drilling so in prop drilling what we know is there is a hierarchy of components so we have a parent component for which there is a child component which is child a and then in the similar way child a also has a child B component then child B has a child component which is child C so in this way we have a hierarchy of components and if you have to pass any data from parent to child C components there is no way that I can directly pass this data so in order to pass it what I have to do is I need to pass it from parent to child a then from Child a to child B and then child B to child C and this is only what is called as prop drilling because what was happening is we were passing the props to child a and child B where child a and child B doesn't actually need them they are just taking the props from the parent component and passing over to the child so in order to resolve this issue of prop drilling we have understood the concept of context API so in context API what we were doing is we were creating a common context and any component can make use of the data from that context so that was the main idea behind context API and we have understood that in context API there were three steps that is creating a context providing a context and consuming the context also in our last video we have seen that when we were consuming our context when we have multiple contexts our code was becoming complex in this way okay wherein we have to first of all consume one context in that we were consuming another context and it was creating a nested hierarchy structure which was very complex to understand and this problem of Ed hierarchy is only solved by using our use context hook that we are going to discuss in this video so I will highly recommend that if you have not checked that previous video where we have discuss context API please make sure to check that too let's Now understand what is use context hook first of all use context Hook is a react hook that is used to access the context value provided by a context. provider component higher up in the component tree enabling components to consume that context without using prop drilling so now let us see what this statement means so first of all what I'm going to do is I'm I'm just going to remove this C that we have written in the last video I'm also going to remove this context that we have taken and we are going to start from scratch so now if you see I have this structure where I have a main or parent component which is my app component here I'm just calling my child a component then in my child a component I'm printing one line that is child a and then I'm calling my child B component in the similar way in child B component I'm calling my child C component so this is our current scenario and here let me write some basic line as of now and when I save it and let's see it on the screen we will be getting this kind of structure where first of all our child a child B and hello is getting printed now let us understand this concept from scratch so first of all what we are going to do is we know we have to perform three step and the first step was to create a context so what I'm going to do is I'm going to create a context so for that I will need a create context uh method from my react in order to create context what we are going to do is we are going to write con and our context name and we are going to write create context in this way so in this way our first context is now created I'm also going to create my second context in this way so now we have created two contexts now first step is completed that is creating a context the second step is to provide this context so in order to provide this what we are going to use is we are going to use context provider so here you can see what we are going to do is I'm going to write data do provider and then we are going to provide the value and this data. provider is going to wrap our component so now what is the value that I want to provide so name is the value that I want to provide here I'm going to write name also we have to export our context so that it can be used in our components so so I have now exported my data and data 1 context now in the similar way let us also wrap our uh child a component with our second context which is data 1 so now I have wrapped my child a component with both the context first one was data and the second one was Data one okay now let's go to our child component directly there we are going to use this context values so previously I already shown you how complicated it was when we were using context. consumer but now in this time we are going to use use context hook so first of all let's import use context and now what we are going to do is we are also going to import our context that we have created so our context were data and data one now the next step is we want to get those values that we have passed right that is name and Tech okay before moving forward I have forgot to provide the value so I'm going to provide the value here and the value that we want to provide is Tech now we are going to get those values so how can we get those values is we have to write con and then name you can take any it is not a compulsion that you have to take the same variable name now we are going to write use context and here we are going to write our context name and in the similar way we are going to get the second value which was our Tech so here I'm going to use Tech and then I'm going to write use context and our context name data one and in this way we have got both the values now we are just going to write a simple statement my name is and then our name value and we are learning Tex so you can see we have clearly got our values that is my name is Rahul and we are learning reactjs so you can see use context how easy it has made our life right previously when we were using context. consumer it was too complicated to consume a context but now with the use of use context it is giving us a very easier way to use our context value that we have Okay so this was the whole concept of use context hook so guys till now we have understood what is use context hook and how can we make use of it in order to consume our data from our context that we have created and it was helping us a lot in order to consume our data but let's now move forward and follow some of the best practices that are followed in Industries to write the code for context because till now what we have done is we have written all of our code in one single file that is in our app.js that is we are creating our context here itself and then we are providing also here itself okay so this is not the best practice that we use in Industries so in Industries what we do generally is let me show you what we will do is we will create a separate file for our context that is data context. JS and let us create this context there okay not here let me remove this line from here and here what we are going to do is we are going to create our context so instead of data let us give it a proper name that is data context let us now also import create context so I'm going to import create context also we need to export this context here from here so that it can be used in our files let me import my context now from there so import now I have imported my data context now the new name of my context is instead of data it is Data context okay and I also need to update the name here and then in my child component also I need to update the name and then here also so once we update the name everywhere it will understand that yes your name of the context is changed but there are still more changes that we need to do so this is one of the ways that we can do that is directly creating the context in a separate file also there are some other ways for example what we can do is we can write a export so basically I'm creating a component in this file and I'm going to return my return statement here and we are going to get the children component okay in this one and here I'm going to write the provider rapper that is data context. provider inside this we are going to write our children and also we want to write our data value that we want to pass so this is the value that we want to pass from our data context so I'm going to write this and then here we are going to write value and name so in this way we are passing this value and now instead of writing this data context. provider we can remove this entire statement first of all let us import data provider and then instead of that line what we can do is we can mention data provider so now we have wrapped our components with data provider okay let's now see so if you see still our app is up and running okay so these are the two things that we have already done here in this file itself that is the first step this was a step one which was creating the context this is a step two which was providing our context now let's do the third step also in this file itself what we can do is we usually consume our context using our use context hook right so there is a better way to do it what you can do is you can create a custom hook in order to import it so let me show you how we can do it what we can do is we can write export on and then use data and here so what I want is instead of writing these things I want to write use data and all of the data will come okay so what I can mention is I can mention use context here okay and now we also want to import use context in this file otherwise it will give an error once I save it now I can just directly import custom hook that I have just now created I can just write it over here okay now if you see our app is still running so what we have done is instead of writing it in this way that is Ed context hook and then inside the cont text name what we have done is we have created a custom component for that why this is helpful let me tell you because you know right now we are only dealing in one child component that is our child C just consider the scenario where we have 10 to 20 different child components where we have to get our name value so in that case it will be very easy because you don't have to uh import your use context in every file and then separately your context file so in that way you can just import your custom hook and you can directly make use of that right so this way it is one of the best practices that we follow that you know in one file only that is you will create one single context file and in that file only you will perform all the three steps first is basically to create your context second is to Pro create your provider component and third step is to create your custom so in this way basically your work will be very easy so now we have understood how we can follow the best practices let us for our revision let's do the same thing for our second context also which was Data one provider right so let us quickly create one new file which is dat data 1 context. JS okay and in this file we are going to do the same thing first of all let us grab this line from here and let us put it here and instead of data 1 let's give it a proper name that is data 1 context and now we also need to import our create context so Step One is done we have created our context now as a step two let us also create our provider component so for that let us write it in this way but before that let me export it and let's now create our component so const data one provider here what we are going to do is we are going to WRA our component inside the provider so first of all let us write data 1. context and then provider all the childrens that we want to rep so children okay and here we are going to write children so in this way we have wed now we also want to mention the data that we want to provide so that is this data that is Tech this is the value that we are going to provide okay also let us export this component which we have just now created now the third step also we will perform here itself that is creating our custom hook so let's create a custom hook F use data 1 now here what we are going to do we are going to write use context and then inside that we are going to write our context name that is data one context let me also export this one we have done everything first of all we have created our context second is we have created our provider and the third is we have created our custom hook let us now update the code in our app component and child component so here we need to remove this line and I need to just import my data 1 provider let me remove this lines and let us import data one provider okay so we are now going to wrap it around around this data one provider so I have now wrapped it inside data one provider next thing that we want to do is we want to go to our child component okay and in this child component what we are going to do is we are going to make use of our custom hook I'm just going to import my custom hook first of all that is use data 1 and then here I'm going to write use data one let us save this and also let us remove this extra things which are not needed anymore so now use context is no longer needed in this file also from our app component so this is also not needed we also don't need to import this data context no more so let me remove this and let's save this file so if you see now we will go on front end everything will work fine so what we have done is we have now followed the best practice okay so the best practice was to create one single file for context and in that file only do the all the three things that is first of all create your context second is create your provider component and third is to create your custom hook now there can be different scenarios if you want you can create separate file for this provider also but that is your choice if you want you can also create two separate that is one for creating the context and one for providing the context so and you can remove this component from here and put it in a separate provider component but this is the most minimum and the easiest way of writing the context API code I hope now you have understood it very clearly how can we write the code in context API and we have also learned the best practices that is used in the industry so that's all for this video if you found the video helpful please give it a like and share your valuable feedback on the comment section and thanks for watching the video

Channel: The Humble coder

Views: 112

Keywords: usecontext, usecontext hook, react usecontext, usecontext tutorial, usecontext hook in react, usecontext react hooks, usecontext react, react js usecontext, react usecontext hook, learn react usecontext, react hooks usecontext tutorial, reactjs usecontext, react hooks usecontext, usecontext typescript, usecontext hook in react js, react js usecontext tutorial, learn usecontext in 10 minutes, usecontext user, hooks usecontext, react usecontext js, usecontext vs redux

Id: 4IoF2r4tqho

Length: 13min 28sec (808 seconds)

Published: Sun May 05 2024