useContext Hook using React Context API | What is Prop-Drilling | Props and Cons of useContext Hook

react developers often encounter scenarios where they must have passed props from a top level component to a deeply nested component and if you also have faced this issue and you want to get it from it then this session is for you because in this video we are going to talk about how you can avoid prop drilling with the help of use context hook hello everyone welcome back to my channel I am Nisha singla and in this video we are going to talk about use context hook in our previous videos we have already covered about you state use effect use reducer Hooks and you can check out those videos because those are very important Hooks and now in the last video I told you about one problem of prop grilling with the help of use reducer hook so to get it that problem we can use use context hook so today's session is completely about use context Hook Once you will understand it in the next video I will combine youth reducer along with use context to show you how when you combine both hooks can definitely improve your code so let's start with today's session and that is use context hook react is all about components right we will be having parent component child competent and further child component right so this diagram is very clear like we have one root competent component one and similarly it has two child component two and competent three and this hierarchy keep on adding up to component six now just assume my component one want to communicate to my component 6 that is a innermost child right so in that case usually what we do in react we pass or we create some prop in the component one and then we pass it to component 3 then component 3 will further pass it down to component 4 and then component 4 will pass it down to component 6. so do you see a problem here we are repeating our data or passing down the data from top to child like this and logically if you think uh idly the data is in the component one and my component 6 want to use that but as this hierarchy is like that so in that case component 3 and component 4 also need to hold that data ideally component 3 and component 4 is not even using that data so it is unnecessary we have to pass down the data to competent 3 and competent 4 so that it can reach to the component 6 so when you pass your prop like this from one component to another component and to all the intermediate component this concept is called prop reading so prob drilling refer to the process of sending props from top level or higher level component to a lower level component so this could not be an issue when you have a very small hierarchy like two or three components four or five components but if you are handing a very big application in that case this hierarchy will also increase so in those situation uh passing down the data in this format is really difficult because in this case we are duplicating the code and it's really difficult to track the data from where it is coming right we have to check every hierarchy so ideally this is not the recommended way for a big application so now we understood that prop drilling is not good idly we use it but of course when application grow then we have to take care about prop drilling as well so to get it from prop drilling let's discuss what could be the solution the first solution is you can have a global State Management like Redux it's a third party library or we can maintain some Global state with the help of use context hook so react also has a concept of context which let you create something like a global data store and any component in the context can have access to the data store so in this session we are going to talk about how we can use use context hook to share some data across the component without passing down in the props or without implementing prop reading so open your editor in the last video we have created this used reducer hook now let's quickly create one more folder with the name of use context hook so let's create one component inside this file uh so here I'll create a maybe name maybe with the name of users dashboard and let's quickly create this component and now we have to link it with our app.js so instead of this to-do's component let's import users dashboard component and we can replace our component here as well save the changes and check on your browser here we are use context hook okay in this hierarchy I have one component let's create one more component here so that I can create multiple components and I will show you how we can pass down the data without using props okay so here let's talk about I have users component now and one more comment with the name of detail.js it will not do anything as of now it's just a very simple component so that I can show you how exactly it's going to work and one more component detail so we can copy this one and we can just replace it with details so we have created three components let's do the linking user dashboard from app user dashboard will call and from user dashboard I will call my users component let's import this one here now within this user's component I will call this detail component save the changes and check on your browser so you can see we have user context use context hook users and details so all these three contents are working now ideally just assume from this user dashboard component I have some data Maybe the data coming from some API or the data I have maintaining some configuration file it could be anything so that data I want to pass to my users component or maybe to detail component so ideally how we use we create some prop here right and we pass some data like this so This prop will go to users component then users component will receive it from here and then it can use that or further if detail component need that then again users component has to pass that prop data to the detail component also with the help of prop so this way we have to pass down all the data from parent to child with the help of props so that we don't want because this is called prop drilling So to avoid that let's see what will be the other way so when we talk about a use context hook it basically work on two things providers and consumers right as a names address provider means who is going to provide the value fine so if my child company needs the data then provider will provide the value so all your companies that need the data should wrap into that provider so if provider is not there then the child competent will not be able to get the data so provider is important so the first step will be the provider you have to create the provider and you have to pass the data to the provider so that provider can further pass down all the data to all its consumers so the next term here is consumer consumer means who is going to consume those context data right so if I have passed some data from provider so to use that data in the prospective child components your child component should consume it so that is called provider and consumers now where exactly you can use this context API that is also very important to understand I will talk more about it later but just to simplify if you have anything that you want to maintain globally like some themes if you have or some uh user you want to maintain is authenticated or sign out login these kind of functionality there you can use this use context hook it has some drawbacks which we have to definitely look into that but I will discuss about it at the end of the video so I don't want to complicate it as of now first let's understand the concept only okay let me show you the steps also uh quickly so that I can Implement for you so the first step is so implementing a use context Hook is very simple it's just a three-step process okay two steps I have already told you let's talk about all these three steps so the first step is you have to create a context okay creating a context very simple you just need to import create context and you have to export it now you have to create a provider provider means from your root complaint wherever you want to share the data to all the child you have to create a provider right so you just need to create a provider context provider and then you have to pass down the data with the help of value property this value property is mandatory you cannot pass anything else right otherwise it will not work and here in the value you can pass anything that you want to pass to all the consumers So within this provider all those component can get this data by consuming it so the third step is you have to consume it with the help of use context hook fine with the help of use context hook you can read that context that you have created and it will return you the data that you have passed with the helper provider so it's just a three-step process and I have just simplified it for you with the help of this Instagram post you can check it out my Instagram page as well for more detail but now let's move to our code and implement this one so as I told you ideally we create provider here in the app file right but let's assume that user's dashboard is the root component for you so that you don't confuse why I have created providers here okay now let's create one folder and I'm giving the name of context because we can have multiple contexts right so it's good to have it in a separate folder and here I will create one file with the name of user context I'll keep it again very simple I just want to hold a username and that username I want to pass down to all the child component without properly okay so let's see how we can do that so to use use context first step is you have to create the context so for that you have to import create context from react package so this is your create context and here you can say const user context equals to create context now create context basically take one parameter that is a default value for your contacts it is not mandatory right but if you want that you want to pass down your context with some default value if if not able to find any provider in that case what value will go here you can provide the default value okay just for now I'm just putting null though you can pass any default value this value will not change it will remain static fine now from here you have to export your context so this is the first step creating a context so creating a context is very simple you just need to import create context and then on this create context you have to create a reference of this variable and you just need to export it create context take one default value which will act like a default value for your context so the next step is creating a provider provider will provide value to this context so that child component can use it so for us I will create provider in the users dashboard again it is not mandatory that you have to use in the root component it's totally up to you if you want to share some data only with the child components that getting called from users dashboard then you will give the provider here so you can decide the design where exactly or how exactly you want to use okay so my requirement is to use context Within These component so that's why I will wrap my provider here so let's see how to use that so to create a provider I simply need that contact that I have created so what is the name of my context this user context okay so what I'll do I will say user context it will import here now what you have to do you need to wrap your components within a provider right so for that what you need to do you need to use this context that is user context dot provider and same thing you have to do here and after that I created the provider but I have to pass down the value also right so it has a value property and it can take anything here let's create one variable username and the value is Nisha so this username I want to pass down to my components so this will act like a value for me here username you just need to import your created context after that on this context you have to call provider provider will give you one value property which will be the data that you want to share and now as soon as you did this one so all those component that will get call from here that will have access to this data with the help of consumer and that we will do with the help of use context hook so now first let's check up to here the UI is working let's open the console tab okay it looks fine now first I want to access the name inside my users.js for an example okay I want to display here username so for that I need to get the data that I have created in the context so for that again you have to import your contacts that you have created user context and the next one is you have to import use context hook with the help of use context hook the consumer part is really simple now you don't need to do lot of stuff for that you just need to import use context hook from react and you are good to go so now all you have to do you just need to say your use context hook and use context hook will take your context that you have created and I have created the context with the name of user context that's it so now if you see this data this data will be exactly what you have passed to the value from here I have did I have done a console.log just to show you let's see you can see here Nisha is coming right so now here I can say data so here we are so you can see it's very simple and if you noticed here there is no prop I have passed to this users but still I am able to pass the data from here from my root component to my respective child components so as I told you you can pass anything from here so you can also pass a object if I get it from this one if I say something like this users and here I said username Nisha right it's the object so even this one is also valid you can pass this object here fine if you check it now go to the console you can see it's the object which have a username property so now we have to fix it here data Dot right so it's correct so you can pass anything as per your design whatever you are working on right so this is totally up to you how or what kind of data you want to pass from here so as of now if you noticed here we have this username which is static right but sometimes we want to update the data that we have passed by our context so it's very simple all you have to do you just need to combine it with your States so maybe this data is coming from a state that data I am passing to my context so that can also be done okay so maybe this username data I'm getting from my suppose this username data I'm getting from state right so how we can do that just simply create a state for that I will use use statehook for now and here I can say const users or maybe set users so now instead of passing it hardcoded like this I can pass it my prop like this okay and rest will remain same so as as of now is initial value is empty so it will also empty right if I pass something here some default value you will notice it will get populated here and of course if you want to modify it you can have a button you can update this state right if you want to have that control here only then it's good you can have a button here and you can attach a on click and you can call this set users and you can update the value and maybe the value new value is maybe full name save the changes and initially its value is empty because there is nothing as soon as I click on this update name it will get updated so updating your context value is very simple you just need to combine it with the states either it is U State hook or use reducer hook okay so now what exactly we want we want that set users should be able to call for my details so that I can update my state so it means your detail component should have access of this set users so I'm not passing it through props right we are not using prop grilling so another way is let's give this function to your provider to your context so that I can access it from there so what we can do we can say update me and it will refer to this set users method okay we can get it from here for now let's give it initial value as Nisha so if you want to use context in the detail the rule will remain same you have to do the same thing that we have done with users component that you have to import use context hook and your created context so the same thing I have to do here I have to import my use context hook so that I can use the context and you have to import your created context as well that is user context and now you will get something out of your context right with the help of use context passing down your created context that is user context if you do quickly console.log data to find out what exactly it is returning ideally it should return what we have passed from here and that is my this object okay let's see that you can see here in the details we have username as Nisha that is my state value and update name is a function okay so it means I got this update name reference as well so if I see here it is returning two things user username and update name I don't need username I just need update name so I can say update name object restructuring syntax right and take out only those thing which is required so I'll have a button here and I'll say change name or update name I'll add a event here and I'll call this update name from here and just maybe I'm passing some value you can handle it in a much better way just to show you this example so let's check this one initially the value is Nisha and update name is a button that we have added in the details component clicking on that will update my context value and it will update the state as well here we are so that's how you can combine your context with your state to make it more useful so I hope you understood how use context Hook is working so let me talk about few things that you need to remember when you are working with use context hooks so that you don't do those mistakes that can happen Okay the first rule is you cannot pass anything else here it should always be value fine the another important point you need to remember the default or the fallback value that I have mentioned here sometime what happened that your child commented me directly trying to consume something right and for that the provider is not there so in that case your UI will not break or your logic will not break at least it will take this default context for you so it's it will act like a fallback value that is important and the another part is overriding the context for a part of your tree right sometime as I mentioned here in the user dashboard all your company may be future we have multiple components here that will get called and for all those components it will act like a provider sometime I want that for specific component my provider should different so in that case you can wrap your component into that provider because whenever you mention any component it will always look to the nearest provider for it so just for example if I created one more context maybe future in future I'll say maybe customer context dot provider okay and I'll pass some value from here just like that okay like this and I want that I have a customer content also in future in the same hierarchy but I don't want that for the customer the provider is same I want that it should have a provider of this one so I want that customer should use this provider so that is also okay you can override the context by referring it like this because all your content will always check the immediate provider so for customer immediate provider is this one not this one and another important point is see everything will come with some pros and cons right I told you the pros thing like it will help us to avoid the prop drilling when you use use context hook also has some drawback you should be very careful when you are using this hook here when you use user context ID it is used for those very which are very static or update very less so in that case use context is okay because use context hook also re-render right Whenever there is a change in the context value all the underlying component that is using that context will get re-render so from this you need to understand two things like keep your context separate for one specific thing create a separate context now suppose for an example in the user context if I create a whole new object a very big object that that contain the user detail authentication detail or maybe some customer default name theming everything if I maintain in one file so maybe my one component just need the user data but because it contains lots of other context so from anywhere in the application if any of the context change all those component that is using this context will get changed even when it was not meant to be re-rendered so it's a very big problem right do you understand it for a small application it's fine but for a big application if re-rendering happen it like this it will really impact the performance so ideally when you use the context try to create or divide your context into smaller part that's why I have created a separate folder so that you can create multiple contacts as per the need so re-rendering is an issue when we talk about uh context so just to conclude this one whenever you use use context hook of course re-rendering will be there if the context value change then all the components that using that context will get rened okay so one practice is always create separate context for separate use don't mix everything in one context okay and another one is even if you divide it into multiple context still re-rendering will be there for the specific context itself right so in that case you have to combine other hooks with use context hook like use memo and use callback so that we can control the re-rendering part so I hope you understood it what is use context hook it is basically to avoid the prop drilling with this you can maintain some global data which you can share across all the child component without prop drilling again it comes with some drawback that can be catered with the help of other components you combine together so in the next video I will be talking about the use reducer hook that we have discussed in the last video and I'll combine use reducer hook with use context hook to show you how we can really use that all together so this is all for today I hope you found it useful if yes then do let me know in the comment section I will see you in the next video till then keep learning

Channel: Nisha Singla

Views: 1,016

Keywords: react js, useContext, reactjs tutorial for beginners, reactjs interview questions, reactjs projects, reactjs hooks, prop drilling in react, react, react channel, react tutorial, reactjs tutorial, javascript

Id: IBqFl7ZHBZY

Length: 25min 35sec (1535 seconds)

Published: Thu Apr 13 2023