🌈 16 - React Context API - What is Context - The useContext Hook

data passing between two components is a very common phenomena in react we have learned how to do it using props in the last video hey this is tapas today we are going to learn about context api another way of exchanging data between two components and more so in this video we are going to learn what is context api and when we should use it but before we get started i would like to request you to subscribe to this channel i keep sharing a lot of good content here all right without any further delay let's get started so let's get started with context api with the help of a story we are going to discuss the story of a family okay so whatever you see the blocks on your screen consider them as different react components so it means you have a components called app.js then you have family.jsx then you have parent.jsx you have children.jsx grandson and granddaughter jesus and this is a family where there is a parent there is a children and there are grandchildren like grandson and granddaughter tomorrow this family can even grow farther there could be other children and their grandchildren up from the grandson and granddaughter that's what we see at the bottom in this hierarchy okay now that's not the story the story is coming now this particular family has a secret and this secret has to get passed from each of this component component to component has to come to parent for the parent to know what is the secret about then it has to come to children for children to know like what is the secret about then it has to go to grandson granddaughter and so on now if you consider each of this block as individual react components so the secret that we have to pass from one component to another component from parent to child can be passed as props we have learnt in the previous section like how to pass as props each of the component has their private state but when they want to talk to each other they actually talk to each other in terms of passing props that's a very good very regular practice that can be followed but when the hierarchy is too much and you have to pass something very much deep down that passing props could be overwhelming and you also discuss about something called props drilling in our last video the props drilling problem also can be appeared so to mitigate that we have we have mentioned about a couple of ways of doing it one of the way is using context api so in this video now we are going to get down with some kind of hands-on coding where we will understand that what is the problem that we are facing with passing these props and then refactor the same code to use the context api so we will take forward this story into code where we have this family with the parent children and all other aspects will pass the secret as a props throughout then refactor that by using the context api to solve the problem of props process passing down deep into the hierarchy all right so let's get into the code i have created all the components over here that we have seen in the family hierarchy so we have app.js inside app.js we have a component called family and if i go inside family what i'm going to see i'm seeing something called parent so you can think about this is family inside family we have something called parent so this is parent so once we go inside parent what are we are going to see we are going to see this h1 this is the parent h1 and then there is another component called children right so if i go inside children what i am going to see is like another h2 called children which is nothing but this one and then there are two more components called grandson and granddaughter so if i go inside grandson now what i'm going to see over here is the h3 grandson and then similarly if i go back to children and then go to granddaughter i'm going to see one h3 with granddaughter which is this one and i put the put some styling around just to kind of separate them out so that they look like you know they are separate components we have a parent component then instead that we have children inside children we have grandson we have granddaughter and parent is inside family so this is what the hierarchy we have seen uh just a while ago and we saw like okay this is how the family tree has been formed now what we're going to do is like first we are going to put certain information like a family secret pass through this particular you know on the hierarchy and see like how that particular information reach from parent to children to each of this grandchildren okay so let's see that in the app.js file i have added an object called family secret and the family secret object has few property so one of the property is a family name and the value is the smiths and there are few functions basically there are some keys which are actually having value as functions so it means that if i i can invoke this function using this key we'll see that later uh the two functions we have like only parent can see there is some secret message and only grandchildren should know there is some secret message so this particular family secret now my objective is to pass to this family so that this particular message get passed to parent children and all other grandchildren in hierarchy right so do to do that let's do the required modification so first thing is we are going to pass it as a prop so we'll do like secret you can give actually any name as we know and then what i am going to do i am going to pass this family secret to this one right so now the family has the family secret the root node of the family got the family secret now it's time that we are going to pass this down so for that i am going to go to family and as i am passing the prop secret what i can do very easily over here is like i can do the restructuring so i put the secret over here and then i can do a console.log of secret so that i know like the secret has got passed correctly just as a measure and then pass the secret back to the parent so what we'll be doing over here will be passing this one to the parent so from family the secret has reached to the parent now as the parent is having this secret what we parent will do is like parent can pass it further pass it down basically to the children and so the grandchildren as you see this console.log from family.jsx line number five so the secret has got passed correctly to the parent so let's go to go inside parent and over here similarly what we can do basically we can again take the structure the secret so we are doing the structuring the secret and then what we can do over here we can do few things for example we can first do like change this one a little bit and if you have noticed that family secret having uh something called a family name so let us just print that family name over here so say parent give a space dollar say secret dot family name and then i'll be closing this one right so this is the one just to be very sure i am going to go to app.js and then copy this family name coming back to this parent and i am going to paste this one so that i don't face any kind of typo so we have this one over here now if you see the secret that we have passed in that particular secret we also have something called only parent can see so what we can do is like this particular secret is having that method so before we pass it to the children maybe i can actually do a p tag and inside this p tag i can just print things like secret dot and then similarly kind of copy this particular function like only parent can see and i am just printing over there so i am expecting once i save this change i have this secret pass to parent now from there i'm extracting the family name so this parent space family name it will come over here and then there will be a p tag below which will print the secret message like only parent can see over here so we have passed the secret message till parent we are yet to pass to the children and grandchildren so let's save and see what is the output right now as expected we see parent the smith the family name has got printed and we see the smiths at the best was the message that only parent can see great so far so good now the next thing is like we have to pass this again down the down dip to the children so we will do like same secret equals to we are passing this particular secret down to the children so let's pass this to the children so children has got this particular secret now the next thing that we'll be doing you know as usual we are going to children right so similar thing we are going to do is like passing the secret back to the children we have the secret over here the next thing what we can do is like similarly how we did with the parent maybe we can actually write something like children and then just do a space you know and then do this expression like say secret dot family name and if you remember that the children didn't have any particular message over here because the next message that we have only grandchildren should know that means we are okay with just providing the family name to the children and then go ahead and pass the secret again to the grandchildren like to the grandson and to the granddaughter so for that i am just going to copy this and pass these two secrets over there we will save it and we will see like what exactly the outputs we are expecting now children will have their family name the smith there is no particular message to over here and we have just passed the secret to both the grandchildren but haven't done anything with it that we are going to do right away so let's save this and let's see the output as expected we are seeing children the smith is got printed over here now what we'll do is like as usual we'll go to grandson so first let's go to grandson grandson here we will be passing the secret back again so let's do that we'll do the secret over here so secret we have done now here in the grandson we can actually do something like we can print like you know the grandson's surname similarly whatever we have done over there so grandson and then space say secret dot family name right and what we'll be doing is basically we will be putting the dollar so that we can actually treat this one like an expression okay so this is done and now the next thing okay this is this is going to be outside yeah the next thing is like as you have noticed like in the family secret there is a message for you know grandchildren so in the grandson one we are going to add another paragraph saying that we are going to print something that only grandchildren should know so here we will do secret dot invoking this particular method and that's all the grandson you know component is ready similarly we'll be doing the exactly same thing with the grandeur component so let's do the granddaughter component as well control p granddaughter we have done the grinder component exactly the same thing showing the family name and then the secret message so if you see the output now we have the family name with each of them and there is a secret message for the grandchildren same secret message that they are the best and parent is also having a secret message children children doesn't have a secret message now our application is complete we have accomplished whatever we wanted to accomplish like we are passing this particular family secret all the way down to the grandchildren so tomorrow if they have a grand grandchildren we have to pass this one further down then their children further down have to keep going with the props so one of the problem that we can recognize over here is like that the props that we are seeing right now we are passing too much way down right so for example if there are more and more children in the hierarchy we have to keep passing these props and this family secret is something which is really really not changing on the way down right it's something that is kind of constant and we are expected to kind of pass to each of the node to each of the children for them to know like what the family secret is so this is where one of the problem that we can recognize with the props process passing props is very good it's a very good way to communicate between the parent and children but in a case where you have to really pass an information which is like too much way down in the hierarchy you may find it little bit overwhelming you may find it something which is like little cumbersome and you want to find an alternate route and that alternate route is with context so next what we are going to do we are going to change this program that we have just now written with context we are going to refactor it and we will see like how it is saving us from passing this props through the hierarchy way way down and things gets more flexible and after that we'll talk about some kind of differentiation between the usage of when to use browse versus going to use context kind of thing okay so let's go and change this particular code using context right now before we change coding we have to first give the answer of what is context i think that's a very legitimate answer to give so let's try to give the answer of what is context in react and and understand and then you'll get back to the coding okay so the first thing first the context is something some information that is available globally globally in the sense that the information that is available in the application for the components to access globally okay so when you say globally it not always mean that it is available for every component everywhere if you want you can actually make it available partially to a set of component in a hierarchy so you can determine in the hierarchy you want this information to be available fully in the all the children or you want them to be available only partially in the application that is completely up to you and your business case then the next thing there will be context provider it means somebody will provide this information to all the underlying children and these children where it is supposed to give the information those children will be wrapped within the provider okay so there will be provider the provider will provide this information which is like context information to all the children that will be wrapped by the provider will see that in the code then the next thing is like for every children that are wrapped by the provider they can consume this information that is that is available as a context now to extract this information they have to use a special hook called use context from react we'll be seeing that and the last thing that you want to see is there could be multiple context in an application that's where the second point you can determine in the hierarchy whether that you know you make we want to make something available fully or partially depending on that that could be multiple context there could be only one context in the entire application that means only one amp information that is kind of globally available to the components or there could be multiple some such set of information that is available only on bunch of components in the bunch of hierarchy in in your react component set right we are going to see that we are going to understand that so if you see a react application we'll be able to see like there will be provider and the provider is providing certain context and there will be consumer there could be multiple providers that's what we are seeing the left side and right side think about a single react application this provider probably providing certain information about search context like user you know putting some search term into the text box hitting enter and the search term goes do some kind of searching find out the result and the result putting into some kind of context that could be the search context here is probably it is about the user context logged in user context once user logged in whether the user is authentically logged in that user information making it available in the entire application as a context this could be another context there could be another context for theme you want to control the dark or light theme in your application for that you might want to create another context so there could be multiple context and for each of the context there will be a provider that will give that information the context information and there will be consumers who will be consuming this information all the consumers must be wrapped by the providers the respective providers that is providing this particular context now if you have this information if you have noted down this information in your brain and notebook let's start changing the code that you have written using props and you will see like how the context is coming to use all right so let's get into that all right so now we will be removing all the props and we'll be replacing them with context now react provides few apis for us to deal with context the concept that we learned just now one of the api is for creating the context for that what we have to do we just need to import react and we have to call this method called react.createcontext react.createcontext is going to give us a context that we are holding in this particular variable and then we are exporting from this file so that we can import it elsewhere and we can get the context value okay so this is what it is now when you while you are creating the context you can pass any initial value to this create context method as a parameter the value can be anything number string object array you can pass anything so it means the context will be initialized with a value and after that we can always override this value whenever we need right we can override this value in different ways so we can actually do that so now we have created a context called family context it is created of inside a file called familycontext.js we are exporting the context from here so that we can import the context everywhere possible to extract the context value how to extract the context value we will see in a while okay so first thing is we'll come to app.js file in app.js file we have seen this code already we have done it with the props following by passing the props this particular family secret so what i have done here is all the code that we have written in in terms of props i have copied that in a separate folder called context and inside that i have created this familycontext.js file and rest of the code is just copies copied from this you know prop drill folder that we have actually coded some time back so that what we will be doing is like will be start changing all this code to have this context right now it all has props we are going to change all these things to have the context and as i have just copied the code this is still pointing to the family which is inside the prop till package but what will be doing the first thing is like we'll be changing this to context so first thing first code is to changing it to context okay so now it is pointing to the family which is inside the context package so first thing is done now the next thing that we are going to do over here is like we are going to remove this guy we don't need this props we are saying that we won't be doing dealing with the props at all rather we'll be doing everything using context now as we want to do everything using context we have to get the context in this file so first we'll be importing the family context that we have created on that from that particular file and okay so family context and then we will be doing it from oh this autocomplete i hate it sometime and then we'll be doing it from the context folder that i have imported i'll just close it so that we can see the entire code now we have this family context over here now one of the theory that we have learned just now is like the context actually has a provider so we can do like family context dot provider and this provider can takes a value in this value we are passing this information which we want to make available on everything that is this particular provider is wrapping in our case the provider is wrapping the family the family component so it means the family component and all its children in the hierarchy will have the access to this value called family secret through the context how to retrieve that value we will see it in a while but first let's close this and let's try to see like what is happening over here i'll save this and as you see everything is broken i don't have this ui anymore because i have to now make changes to each of this you know components so let's go to the family component first and let's see what is in the family component so the family component is basically taking a secret it was taking a props we don't need this props anymore and it was basically printing it we don't need to print it anymore it was passing this we don't have to pass it anymore so we don't have to do any of these things so if you see we are just calling another component called parent over here so whatever is there inside this family is not really of much use we could have just called parent directly inside the app.js but you know we are doing it now because we were using the props and passing it this way but after refactoring we can actually lift this up one level and get rid of family completely we can use the parent basically directly inside the app.js we can do this refactoring if we want but for our case our understanding will proceed we'll now next thing what we'll do is like we'll now go inside parent and see what is this case so once you go inside the parent we see that we have this you know the secret pass as a props so first thing what we are going to do is like we are going to take out the props but we also see that this particular secret is used to extract certain information now instead of taking it from the props what we are going to do we are going to extract this out from the context now to extract this out from the context the first thing that we would need is the context itself so what we will do is like we will be first importing the context family context from you know dot slash family context so the first thing we'll do now to extract it out you know ah to extract this one out ah the information from the family context we need a special thing from react called the use context hook use context from react all right so we have this hook now how do we get it it's simple we call use context and then pass family context yeah past primary context this returned me the information that i have stored in this particular context the family context in this case the family secret so we will do like const secret equals to use context family secret now the secret has the same secret that we were passing through the props but instead of taking from the props i am taking from here so i can actually make use of this over here i can do this i can do all these things so if i save this one so let's see uh the kind of output so i'm getting this output back right i'm getting this output back so it means the secret that i could have retrieved i could have retrieved i could you know retrieve really really well from the context correctly but you know i won't be again passing this secret as a props because i don't i want to kind of break this props thing altogether so what i'll be doing is basically i am going to remove this again and next thing i will be doing is basically i will be getting into the children and similarly i will be getting the context and the use context over there and i will be retrieving the secret from the context instead of taking it from the props so i will be going inside this the children i'm just importing this thing and then what will be doing this a single line say const secret equals to use context of say family context so what we have now similarly i have taken the secret from the context and the same secret is being used as a family name same secret i am passing that also i will be changing so here i have made something error which i have to check okay let's see whatever i have made the error is nothing but i was passing this props which is no more required i don't need to pass this props so i've just removed that i'm taking it from the secret altogether so things are again working but again i don't want to pass this as a props write it to the grandson and the granddaughter also so basically the same change that you can do you can pass it from the grandson you can actually just pass this off just remove it from the granddaughter and instead of that you can now go to the grandson and the granddaughter and just do the same thing take basically things from the context and then assigned to a variable things will start working so let's do that i have done it for grandson now so grandson is having the secret coming from the context and i am calling the function like only grand children should know so we can do the same thing with the grand granddaughter as well so let's go ahead and start changing granddaughter so we'll go to granddaughter as i change grand order of the similar fashion to take the secret from the context i get this ui back just like how i was getting from the props so let's do a quick overview of what i have done just now okay so we had something called app.js right so it first start from there right from the app.js so in this app.js now we are actually using the family from this context okay because we don't want to touch things on the property that we have seen before we have a secret called family secret we are we have created a context called family context and the provider of the family context is having a value called family secret and we have wrapped the family and its entire hierarchy with the provider so it means this particular secret is now available to family and all its children throughout now the family is not doing really much other than calling the parent we could have just get rid of family and instead of that you could have taken this jsx and lifted it up into the app.js jsx itself so this is another thing that you need to look forward to right when you are passing the props too much down the line before you go and use context you have to see whether you have to refactor certain jsx to lift it up one level then actually having it as a separate component altogether so this is one classic case of that we could have just taken this out in one level up in dapp.jsx itself this jsx okay fine so we'll go with the flow now next what we'll do is like we go to the parent in parent now we are not taking this props anymore rather using this context family context and the use context hook from react to get the context value over here and same context value you are using and the same thing is happening for the children same thing is happening for grandson same thing is happening for granddaughter all way all the way so there is no problems we are just using the context so i hope you understood now the context of you know the context basically uh how to use context and you know how it can be an alternate of data communication between your child and the parent child to parent parent to child and things like that now before we finish this video i just want to talk talk about few things you know context is very tempting to use everybody would like to use context the moment they know like how to use it because you store some data and you will be able to get some data from anywhere so as there is very it is very tempting to use i would suggest that please think before you start using it props is the best way as long as you want to pass information down from the parent to child that is the best way but if it is something very overwhelming and not going too much deep down think about two cases first case is like are you using you know component like you know after doing very small small components and it is like too much of component that you use using that you need to kind of get rid of may be the jsx of that component you have to lift up and use it in the another component the one we just now saw between the family and parent family and parent and the after jsx so if that is the case you have to take care of that if that is not the case you can actually go for context but again think whether you need context very globally or you need it only for partially for example the context can be created only between children to grandson and grandsons children grandsons grand grandchildren and like that you can create only for that hierarchy the hierarchy that is required you may not want it globally and again you can use context with say reducers reduces we are going to learn in future in our future videos so you can use context with reducers that is when it will be like much more powerful much more meaningful of usage of context so don't use context very loosely before you try to use props as much as possible and if you can't use props there are a lot of complexity in that and you need to have context yes go for context it's an awesome thing to kind of deal with so i hope this video was quite useful to you and now you are going to learn about it so one exercise that you can actually start taking by using the context is like start try to build a small application where you can have this dark and light theme it is kind of that this particular application example available throughout on internet you can actually go read about it and create it but from this video whatever you learn you can just think about okay how am i going to create a global object which is like a theme object which has a background color and the text color some default value and which is default value for the dark and the light theme you will be passing that as a provider and it will be passed through the entire application now there will be a button somewhere which you click and it will change the value of that value of the you know light to dark and dark truth light and your rest of the applications theme gets changed try to build that and find me on twitter find me on linkedin wherever it is if you are building it and if you are facing any issues let's talk let's discuss put post certain comments you know on the comment of this video with your difficulty i'll make sure i'll get back to you or catch me on twitter dm i'll get back to you with the difficulty that you have in building this application okay so looking forward to you that you will be building some application using context all right so until then take a very good care of yourself next in the react series we'll start talking about redux we'll be talking about store redux we'll be talking about reducers and all these concepts going forward okay so stay tuned to that and please please please subscribe to this channel if you haven't subscribed yet i keep sharing lot of good videos in this particular channel thank you very much take a great care of yourself talk to you soon and see you soon

Channel: tapaScript by Tapas Adhikary

Views: 4,051

Keywords: react, reactjs, javascript, props, prop drilling, context api, react context, useContext

Id: yijn4ZIBxVA

Length: 32min 9sec (1929 seconds)

Published: Sun Jul 03 2022