Advanced React Patterns, Performance, Environment and Testing | New Course Launch 🎉

hey everyone welcome back my name is meijel and welcome to a brand new course in which we'll be learning about advanced react patterns the performance the ecosystem of react and how you can test your applications so this is not the average course and if you if you want to begin with react what i would recommend first of all is start with react tutorials now you can find this inside your learning paths and react mastery learning path and you will be able to get started with the tutorials in order once you are done with react tutorials move on to the actual projects from pedro's course and then finally advanced react hooks this course will introduce you to hooks and how you can get started with it and once you're done finally come back to this course so i'm pretty excited to begin this course with you guys and from the next video onwards we're going to be seeing some of the advanced patterns in react so let us go ahead and start the course by creating a button which will help us understand a few concepts so i'm going to go ahead and create a very simple button right here which is just going to return also development which says i am a button right and whenever i click on this we increment a counter so we can create a counter or maybe like we can name it counter set counter real quick with the usted hook and set it to zero right and you can set the counter right here so what you want to do is whenever you click it you want the set counter to increment the counter so once we do that you can go ahead and embed this button let's say right here now we can actually get rid of this whole thing and this thing so we will have something like this right so i am a button with a zero means this is a you know this is a simple counter and you can embed this button as many times as you want and you're gonna see that you get multiple such buttons now let's say you want to have your custom logic as well whenever you pass in a single prop or you know um you want to customize the appearance of this so let's say you want to have a size property which says or maybe like color not really size so it says black this one says blue and this one says green right so sure you can go ahead and accept the props now and you can start applying the props not really color but maybe like something like style and then you can say color is props dot color right so you can do that all that logic stuff here but what about let's say you want to pass in some common properties to these three buttons right so let's say i want to have increment of 2 and let's say something else underline as true right so the way you can do it is uh of course we can first of all make this work by saying this is one instead of one this is props plus increment and then underline just means that text declaration is props dot underline then it means we need underline underline otherwise undefined right we don't really want to set this property so you can see for all three buttons we have underlined an increment of two so this works fine now the way you can pass these properties is of course you can write them one one by one but what you can see is because you repeat them so many times you can actually take them out right so you can take them out completely and you can say cons props is an object which is having these as the value right and of course you will need to specify a comma then you can destructure these props like this and this is equivalent to the thing which we wrote before and you can see now if i refresh the effect is still the same the increment is two and the buttons and the text is underlined right so the reason it works is because under the hood what happens is that this jsx code right here this jsx code gets converted into react dot create element calls right so your props your props the way they are passed is for example this button is created something like this and this the second object right here is your props right so when you do something like this you are actually passing these as the prop so if you do let's say prop 1 is 100 this is equivalent of writing button prop 1 equal 200 right so this is equivalent so the reason you can destructure this is because think about it if you're passing it as a prop you are actually doing a destructuring of an object here right and from es6 we know that this destruction will result in a proper object again so jsx will do a destructuring and it will result in props being passed now this follows the object rules again similarly so if you have something like a color of black here for example and if you save this refresh this you're gonna see this does not affect anything but if you try to move these props right here from instead of at the starting to the end you can see now that all props turned back in black right and the reason for this is because in javascript you know that if you have an object something like this which has a property x1 and if you create an object 2 which has a property x2 but you destructure object then this destructuring if this is later this would rewrite this property right so finally object2.x is also one however if this is before the initialization of a duplicate property this one would overwrite any other value right similarly if you have x3 something like this if you have an object like this um can you guess what's the final x value in object do dot x well yes you guessed it right it should be object two dot x is in fact three so yeah this is not so advanced pattern but i believe you should know about how this works the destruction property because it is it is useful when you have a lot of properties first of all and it is useful when you have a lot of common properties across a lot of components right so that's why that's how you can use it if you have let's say a bunch of properties sure you can have an indentation and everything but if those bunch of properties are shared with a lot of other components then it's better to extract them out in a separate object and then use it so yeah that's pretty much it for this video hope you understood something new i'm gonna see you in the next one hey everyone welcome back and in this video let's just go ahead and discuss about something which is important not only in terms of react but also in terms of general computer science and that is understanding about state machines now we will not dive you know very deep into state machines they are a very vast topic if you want to study them but just to give you an idea what you can do with state machines is that you create a sort of logic where you transfer a state of a particular program from one state to another let me explain how that works so let's say your program starts right it starts now let's say you have 10 buttons on your page which do different things so whenever a user clicks on a single button the program then transitions into a different state right so the flow would look something like this you will have a initial state start here then you will have i cannot really draw it here would probably need a white board or something but you will have 10 arrows which indicate that hey when you click on button one you transition to that state button two transition to that state three four five six seven eight and so on and so forth right now it is possible that clicking on one of these buttons probably makes an http request and then that request might fail might not fail right so you again have those nested sort of things where in a state it could transition to another place for example if it is an error state so you would probably have an intermediate state and then move on to an error state now why i'm talking about this is because in real world when you're creating react components it is a very good idea especially we'll see that with the http example later on it is a very good idea to have a a sort of a state instead of playing with boolean values right you're going to probably see something like some logic like this in a lot of code bases right so they might flip the busy to true if let's say you are making an http request and flip it to false if they are not making you know if they're done making an http request but the thing is with network request you can be in a lot of different states not just uh making and not making you might be making you might have made and failed you might have a cash hit so you can be in a lot of states you might have a successful response but a wrong sort of format of the response from server so how do you account for all that stuff so for this what you should do probably we'll take an example of http later on but for let's say this particular button the way you do it is like we discussed in advance react hooks making use of the use reducer hook is pretty convenient in this case so what you can do is you can say state and dispatch right and you can say use let's say reducer with a reducer function right and your initial state could be we can define that so let's say our reducer function is something like this which will accept an action right and then we switch to action.type and depending on what we have received um we're gonna be pretty much you know we can just destruct it here only type and payload so if we have the type we can say case let's say if this is something like um pressed once so you are creating a state where you are on pressed zero initially then when you click on press one you return pressed to or maybe like you know state is press two pretty much anything you want with additional metadata if you want to store if you're on press two you return to state of pressed oops pressed three and uh if you are on case state of press three you just return you return state press one right so i have created a cyclic sort of state machine here right and once you do that you could pretty much use reducer is not defined so let's import that and right here you can say your state starts with let's say pressed one right so whenever you click on this button instead of incrementing it this time what we can do is probably say dispatch and okay so a couple of fixes here we don't really need to switch on type and first of all we need state so we're going to have a state dependency i hope you understand how use reducer works if not go back to advance the act hooks and you will be explained in a much better detail so the first argument is to give you a small crash course the first argument would be automatically filled by react and the second argument is what you passed inside your dispatch function so we can pretty much get rid of the dispatch and in fact we can get rid of this as well to be honest because we are not using anything so we can just switch on the state itself so if it is on press one uh we do that and so on and so forth so once we do this get rid of this we can probably say something like or maybe like you know we can move this logic of on click inside an another tiff and inside this div i can say let's say the state of the actual thing which we have right so we click on this and cannot destructure undefined as it is undefined so let's not destructure it at all so if i click on this you can see we have created a sort of a state machine right so when i click on this we go to this when i click on this we go to this when i click on this we go to this this is extremely powerful concept in terms of just like i said you if we are working with http information right so maybe once we had on let's say initial request i want to switch the state to loading once we have made the request i switched the state to loaded if that is an error i switch the state to error if it is success i switched it to success and depending on how our response looks like or how our state is we render a different version of component right so this is a very basic and simple example of how you can create a cyclic state with use reducer but in the next video let's take up an example of an http request to understand this in a much better detail hey everyone welcome back and in this video let's just go ahead and take a look at state machines again but this time with the help of an http request so what i'm going to do is i'm going to just get rid of this and i'm going to say current state of the app is and we can probably just get along with you know use state itself if we use just a single string and do not attach any metadata so i can say state and set state and use state and let's say idle right so we will have let's see let's see how many states we can have the first one we'll have is idle the second one we will have is loading the third one we'll have is loaded the fourth one will have this error right so these four states sort of like are okay to begin with so i'm going to go ahead and say state right here and we are at idle if you are using typescript you can pretty much just restrict the value of the state as well but more on that later on when we are in the typescript course so anyway you start with an idle state and you can see that i have a data.json file inside my public folder here so i can go to slash data.json and i'm going to see that i get this nice little json so let's go ahead and load this so the way i'm going to do this is i'm going to have a use effect right here and we're going to be covering how we can better do http request inside of the react ecosystem section with react query but for now let me just go ahead and use this so i'm going to say fetch this thing and we can pretty much just drop that and then i'm going to say do something right so this this could be your custom logic i'm not really going to get into that but the way you approach this is that the moment you're about to fetch the request is you set the state to loading right now the moment you do that your application becomes aware of that and the http request is sent now once the request is successful you set the state again to load it however if the request was not successful you set the state to i don't know something like error right which is mentioned here now if you have more than let's say if you have multiple things to store you can create an object if you want that's completely fine you can also use a use reducer if you want to that's also fine but the crux of the thing is now your application is pretty much um in a in a better position to handle a lot of edge cases right than before because if you just had you know state or maybe like loaded and loading set loading and then you set it like that then how do you handle the error things right so now you can see if you refresh and if i go ahead and try to do a little bit of throttling let's see if that helps slow 3g if i go ahead and refresh this you could see well for a split second it appears loading and then it appears loaded right so if i go ahead and for example let's say if i have a button clicked here right or maybe like not in an effect we don't really want that to happen in an effect so let's add a function clicked right and we do on click this thing right so now when you're on idle when you click on this well let's refresh when you click on this you see you get a loading for a split second and once the data is loaded you get loaded right so i'm going to refresh this again just to see how this works idle loading and loaded so meanwhile it is loading for example you can say if state is equal to loading you can say return now this becomes very convenient right because now you have all sorts of placeholders for your stuff now you can also make use of this error state and the way you will use it is simply by saying if state is equal to error you can say something like error fetching your request because it is quite possible that right here you might be if you're storing this data the data which you get inside a state variable you might be using it directly right so if you do that and if the request errors out for some reason if it is a network error or you know just not able to fetch it then you were in trouble because your application will crash and the user will see just a white page so in order to avoid that you should have error proper error handling and a good way to do that is to use this sort of concept which is making state out of your application so once we have that in place if i refresh this again and if i click on this you can see we get the loading message and once it is loaded we get the loaded message now i can go ahead and make this data2.json which is going to fail the request because that file does not exist data2.json so if i click on this now we get a loading message and looks like we do not get a network request error so let's just try to simulate one so way the way we can do it is we can try to json.parse this data right because now this will not be able to parse the data the json response so we can now refresh this click on this and you could see that this request although it succeeds but because we were not able to pass the data it fails and thus we land in the catch region which sets the request to error fetching a request or maybe you know you can even go a step beyond this so you can say try json.parse and then set the state to loading and if you catch any error in this step you see it becomes very convenient now to define multiple behaviors once you have state so you can say json error right or request error or right here you can say network error so now you can have custom behavior if you have network error then error fetching a request if the state is request error then you can say something like bad server response right so now if you go ahead and refresh this one more time and the moment it loads if you try to make an http request in offline mode if you click you get an error fetching your request but if you try to do the same thing inside an online mode but with a you know wrong file name if you click on this you can see we get bad server response so having the state mechanism in place will help you a lot and this is something you should follow as well it keeps your component logic clean keeps you sane instead of you know if you just had a loading and set loading boolean value here it would not have helped you much so yeah that's pretty much it for this video i'm gonna see you in the next one really soon hey everyone welcome back and in this video let's start something interesting which is known as compound components in react now i'm pretty sure if you have ever used an external library like material ui or maybe some sort of ui library you would have seen this pattern where what you would do is you would have something like a check box check box component like this and inside you would have certain components certain child components which are only valid for that particular component right so for example though the one thing which i could think of which is which probably might not be feature related but inside material ui if you have table and then t body for example t head or t body whatever it was i did not do not remember the name so these components are compound components which build on top of each other right so let's just go ahead and build a compound component in this one and see how this will all work so i'm going to create a checkbox component right we're just going to render a checkbox for us so what we're going to do is that this checkbox component right here is not going to be a checks check box within itself but this would render this would be a parent of all the rendering of the checkbox so let's just go ahead and give it a simple checkbox at the moment and now what i want to do is let's say i want to have a label like this which says um check box label right and then i can say something like check box input which would then go ahead and render the checkbox input right so the checkbox input component would look something like return input type check box and that's it as a simple thing right and then the label component would look pretty much just like return label right for i don't know something which we'll figure it out later on and of course we can have a children here which will be passed right so we can have a check box right here and uh yeah because we are not really rendering the children so it does not really happen so we can just say children right here right inside a diff probably so there we go and of course restructuring it so there we go now you can see that we have a nice check box and a nice label but what's really missing is that we want to link these two components what i want to happen is that when i click on this label this checkbox should get checked and vice versa right because in an actual setting if you have a label and an input field this would actually happen right when you click on this this will get checked and then this will get unchecked so how do you link these components how do you link a compounded component sort of interface without actually uglifying all this stuff right you can go ahead and you know just mess around with the order if you want maybe put a bunch of elements as well in between we'll see that but these two at least should be linked so let's see how we can do that in the next video all right so let's just go ahead and try to implement what i was talking about in the last video so what we want is first of all i want to have an on click event here so that we can toggle the checkbox state so whenever i click on this the checkbox should turn tick and then not tick you know so one way you can obviously think about is the way we will get this value is from props right but how how do we pass this prop because you can see label is a component and ideally you would see you would think this is how you would do right and you are right this is how you would actually do it in a real-world setting but the problem is like i said we don't really want to ugly fire this experience because then what's the point of using this whole compounded stuff right so the way we want to happen this happened is that this all should internally share the state right and one way to do about that is check out this parent so both of them have the same parent tag with themselves so what does that mean that means that you can share some sort of state in the parent itself so i'm going to do a couple of things first of all i'm going to make this as a controlled component so i'm going to say checked set checked as use state and let's say true i'm going to say this as checked value as checked i'm going to say on change event is set checked e.target.chat right now check validity just checked right and let's just go ahead and import you state so that it does not complain that that to us and you can see on change set target e.target.chicken you can see whenever i click on this it toggles perfectly fine just like before now what i want is that i want this toggle to appear because right now if you click on this nothing is going to happen and it probably is logging some errors or something or maybe not i don't know why because let's see dot log toggle so this is undefined so yeah i mean on click gets undefined so nothing happens so what we want to do is that we want to introduce this toggle function and the way we can do it is inside the payment element just like i said but the way you do introduce a prop without actually passing inside the declaration of the prop is that you can technically um override the props here using something known as react children now react.children is an inbuilt utility from react itself which would allow you to iterate on every single child inside of the map thing so what this is let me just go ahead and write the syntax real quick and then i can explain you in a much better way if i go ahead and do log console child and return nothing if i go ahead and very well we do not have react as defined that's a new thing so if i go ahead and check the log and you need to pass the children prop because this is what it will take and i trade over every single one of them so the moment you do it you can see that you get two objects like these and these objects might seem very very familiar if you have watched the react basics course in which we discuss how fundamentally jsx elements are created and this is in fact a jsx element right you can see it has got the props it has got the key it has got ref it has also got the type which might look familiar to you know the function of that particular element so there's that so we can mess around with this and you can see that if we try to integrate a prop within itself if you try to add a prop so i can say child.prop dot hello is equal to world and then we can return child right and then we are finally returning this collection of children so that's perfectly fine but you see the moment i do that you can see we get an error that cannot set property hello of undefined so that's a different error but even if you do props right here you will still get an error which says cannot add property hello object is not extensible so the reason it happens is because react internally does not allow you to change props like this right because it might have its own mechanisms of watching and you know registering some sort of props or whatever it is but what react allows you to do is clone this element first of all so we can say clone is react dot clone element and then i pass in this child right now when you're cloning it you can also pass it a bunch of props that is the props it should accept so of course you want the prop it should accept the first one is let's say if you want to try it out hello and world so if i go ahead and do that refresh you can see it now works fine and of course it will because we are not returning the clone so now it works fine but what you will be able to see is that now we have access to a new prop in both label hello like this and inside the check box input as well so i can just go ahead and you know show you that this is in fact working you can see we get two words right here with the hello prop because we are injecting it um inside of the react.clone element which is the new child and then we determine the clone and then we finally return the whole collection so we can do something like all children if that is clear and then we can return all children right this is one and the same thing so you map over all the children which are passed and the reason you need you know this functionality is because you can have multiple childs as well as single child as well as a child property which is passed so react takes care of all of that right so it abstracts away the logic of iterating of an array or a single jsx element and you don't really have to worry about that so you just get a single function which is executed again and again for all the child elements so the moment you do this something like this you can see now you have access to the hello prop even though you never really passed it like this right so even if you try to pass it right now you're gonna see that it does not really work because you know you override it internally like this so we can make use of this to our advantage to a little bit extend and the way we will do this is we will move this checkbox input state a little bit above right so we will add the state right here and right here we're going to say checked and set checked as the past values right so once we do that you're gonna see that now i can access set and check set like this get rid of the hello which we had get rid of this unnamed component and pretty much this remains the same the only difference which has now happened is that we also have access to set checked here which is pretty cool right along with children obviously children right and now like what i can do is inside the toggle state i can say set checked is state and i just return the not of that state right so i hope you understand what's happening here if not we'll just go over through this one more time so what's happening here is now if i can click on this checkbox label you can see the toggling still happens although these are separate components right still they are sharing they are able to share the state so just to go over to what exactly we did first of all we created a checkbox component which is the parent of label and checks checkbox input check box right here accepted children as the property which included both of them we i traded over these children and for every child we cloned it first of all and passed in two props right the first one is checked second one is set checked which is basically the state of the main checkbox thing the moment we pass these two props to every child now the checkbox input and the label can access both of them well they also can access the children and the children property is something like this right if you want to make use of it you can that gets automatically added when you clone the element so that's not a problem so the children property allows you to do something like this now once you have checked and said checked in checkbox your checkbox input can work fine independently but you can also get the checked set checked property inside your label and then toggle the state like you want to right like it always have worked so i hope this makes things a little bit more clear in the next video we're going to be building a little bit more on this try to understand exactly how this will work with let's say dom elements so yeah that's pretty much it for this video i'm going to see you in the next one hey everyone welcome back and in this video let's just go ahead and take a look at how you can allow or disallow the use of dom elements or let's say any other element as a matter of fact inside your compound components so what you can do first of all is you can just go ahead and probably add a line break in order to get them on separate lines right which looks and works perfectly fine but if you go ahead and take a look under the hood you're going to be seeing a lot of errors right actually a single error but it will be a big one you see it says you react does not recognize the set checked prop on a dom element if you intentionally want to to appear in the dom as a custom attribute spell it as lowercase instead so what's happening here well you remember that we are using react.children.map to iterate over every single child right so what we are doing here is if you console log the child you're gonna see that the second child is a br right you can see the type of this child is br whereas the type of the rest of them is actually a function right checked and said check this is our function right especially again the type of this is also a function which is a custom element so remember in react there are a few um valid definitions of an element right dom elements of course elements then you have classes you have functions you also have null right null is also a valid jsx element so what you can do is you can filter out let's say if you do not want to act on the dom elements what you can do is you can say if child dot let's say let's say child dot type because that is what it is is not equal to function we know that this is not our element right to be messed around so i can just go ahead and return the child instead we don't really want to act on this one so the moment i do that refresh now you can see we do not have that warning anymore but we have something else set checked is not a function and of course this is hugely wrong because this should be type of child.type right so now if i refresh this again you can see it works absolutely fine but with no warnings in the console now this however this do allow the use of any random um dom element right hello world right so it'll also appear if you want to restrict this the way you can do it is if type of child is equal to string then you know that you have got a dom element so you can say dom element right here and then instead of returning the child you can throw a new error you can say dom element is not allowed inside the check box component right and just to make this even more helpful you can go ahead and actually write the type of dom element found right so now if you go ahead and refresh this close the console you can go ahead and see that well this is again a wrong statement this should be in fact equal to string let's refresh this and you can now see p dom element is not allowed inside check box right you can also give it a nice gesture like this refresh and you get a p element not allowed inside the tone right even even if you're writing like span or something else it'll perfectly show you that this is the wrong thing you're doing the wrong thing so that's one way to go about another way is just pretty much ignore the child itself if that that is a top element you can go ahead and just return null which will not render anything at all so you can have all sorts of screaming screaming and everything going on but react will never show it because that is inside a dom element now another thing which you can do is you can just white label or not really white label just white list the components which you want right so you can say that if child.type is not equal to label right which is our function functional component and the way the reason you can compare this type directly to a function is because this will also be the same function right because remember we saw the child of type if you go ahead and take a look you know that child.type is in fact a function and this function is exactly the same function which we talked about so that is why you can compare them with equality because they are referentially equal they point to the same function in the memory because again these are outside the component they are not recreated again and again so if childhood type is not equal to label and child.type is not equal to let's say check box input then you want to throw through new error no custom element supported right and looks like we already have an element which is not really custom so we can go ahead and move that so now you can see that even if you have a custom element let's say something like this which returns just returns a p tag even if you have something like this this will also not work earlier it would have worked but now it will throw you the error that no custom element is supported because you have just white label or not really white label i keep on saying that it's just white listed the elements which you allow to be used inside your um this whole setup right and refresh and it's gone so yeah that's pretty much it how you're gonna create stuff like this it is pretty interesting to see actually how this all works and yeah i mean there's this one little thing that if you take out this component let's say if you try to use label without being inside check box then you'll run into some problems because these things the set check does not define if you try to use checkbox input these two things are not defined right so we will figure out that how that will work and how that will happen but uh yeah that's pretty much it for this video i'm gonna see you in the next one thinking about how we can fix that particular thing hey everyone welcome back and in this video let's just go ahead and take a look at how you can or you know you can not allow the user to use the components individually right so first things first you can see that if i'm trying to use this label directly it kind of works but the moment i click on this it will fail because the setcheck property is not um sent right and it makes sense because if you are using it without the check box right here nobody really injects the prop set checked therefore you cannot really access this prop anyway right because we do not do this right here but if you are creating let's say if you're creating a sort of a library or something this error is not helpful at all because you most likely will be importing this error this label component from some other library so what you want to do is probably throw in a help or check you can say if set checked is not defined that means called directly so you can say throw new error labels should be called from checkbox component right so this will help you fix a little bit of messaging problem here so now this is much more better better in terms of readability um and you can get away with it now there's another thing which you can do for example with checkbox input um i'm gonna try to take another route so you can see if i refresh this it works but the moment i click on this it will again fail for the same reason right so it might be possible that instead of doing something like this you might want to you know just just let this happen that if you are creating a set checkbox input it's perfectly fine you can create it individually but maybe if you want label it has to be inside a checkbox so how can you go about that well it depends on component to component honestly so i can just show you the example for this one but if you want you can circumvent the measures and for this case the way you can do it is you can create an internal state you can say checked say checked and then you can say you state again here and initialize it with whatever that it was passed right and then you can say that hey whenever this checked prop changes you set checked the value to check right and now what you can do is on change you set checked to eat or target.checked right because this is necessary this thing is necessary so that you propagate the correct value to checked at the top of the tree so that label can get the correct value right here and once that propagation happens it comes back to here this checked value gets changed you change the set check here now this is one way to go about but here you would see that you are actually going to waste a render plus if set check does not defined you're going to be screwed so what you can do instead is you can go ahead and say that hey if if set check is defined then and then only i want to call this otherwise i would always like to call the internal handler anyway check right and i can get rid of this use effect so now when i do it i click on this this will set the variable this will set the state and yeah i mean you can update it like this and it should work just perfectly fine one quick problem you're going to see is that you get a warning from the act is that you're trying to change an uncontrolled input to control now the reason for this warning is because when you call it like this because you're not passing the checked prop this comes in undefined right so you state starts with undefined your checked prop starts with an undefined value this means that well you know your property value is in fact undefined therefore this is an uncontrolled component and the moment you tick it for for the first time it checks it to true and then it becomes controlled so to fix this you can force cast this to a boolean by using double equal double exclamation and the only thing this will do is that convert this undefined into false right if it is like true then of course it will remain true because you're double negating it and if it's false it still will remain false but this will just convert your undefined into false so that you do not get that warning which you were getting and of course have not saved the file that is why and you can see now you can make use of it one thing you can do is you can say use effect once it's ready once the component is ready you can say if checked not really checked but if set checked is not there you can say console.1 checkbox input should be called inside check box for maximum benefit or something like that you know depends on what you want to do so now you can see you have warning but not really end of the world right you're not really doing an end of the world thing so yeah that's pretty much how you're going to work with the components without actually nesting them one another and this is this is sort of a pattern but i would recommend probably like throwing the error because you don't really want to implement custom functionality in every single one of them if they are not present in the correct manner but this is how you can approach and create a little bit of um sort of widgets or ui things and get on with it so that's all for this video i'm gonna see you in the next one hey everyone welcome back and in this video let's just go ahead and take a look at how you can create more flexible components which are called flexible compound components as well using the same thing right using the same um sort of logic of sharing the state so let me just go ahead and restore what we had really quick so check box input and then label with a click me something like that right and i'm also going to remove this custom logic because you probably would rather throw instead of you know not really creating the the sort of fallback thing so i'm gonna just show you error should be used inside check box now with that being done what i want to do is i want to do something which will allow you to do something like this right because what's gonna happen right now you can see that we get a no custom element supported which is perfectly fine but even if you try to you know support it what's gonna happen is that the element will not appear why because reactorchildren.map can only run on a single level nested right you probably might be thinking that now how do you how do i inject the label with the appropriate values or with the appropriate thing even if you get rid of this whole thing and getting all the warnings and everything uh you're gonna see that you get an error that label should be called from the checkbox component even after even by the after the fact that it has been called inside the checkbox component the reason the set checked property is not reaching the label is because react.children.map is going to cover only three children that is the first one is going to be the first one is gonna be or not really three just the two the first one is going to be the input type of the check box and the second one is going to be the steve right here reactor children does not recursively go inside the children right so how do you fix that well firstly you might be thinking that maybe if there's a way to recursively you know go inside that particular tree and do some sort of stuff but uh yeah no let's not do that instead of going recursive way what we can do is we can pull the state out that is the shared state inside a context right context is supported by default uh comes from react pretty much an easy api to set up and allows you to have nested access so how do you do that is you first of all go ahead and create a context or maybe like create a provider something so you say create context import it probably right and then you can pass in any value which you want next is you go ahead and instead of returning all children what you can do is you can say or maybe like you know check box interface something like that you can say check box interface dot provider and then wrap the whole children uh return value inside this right so what's happening here is that you are essentially just um passing or just covering this all children into a provider which is a context provider now what you can do is you can pretty much get rid of this whole thing let me just tell you why you can get rid of this whole thing and you can pass the value directly as the context value so what's happening here is and instead of all children now you're going to be just using children so what's happening here is that you are now passing or storing the value checked and said checked which is the state inside the context and then your children can access that context directly and the way they will access this is something like this instead of now receiving it from the props we're going to be receiving it from the context provider so you're going to have something like checked and set or maybe like not really this because we want to check if this called from outside the main component so i'm going to say use context and then i'm going to be providing this uh check box interface right so the moment we do that we can check if the context is not present again label should be called within the checkbox component if it is then i can just destructure checked and set checked and i can just say props not really props but context and we of course still need the children because that is obviously passed directly and then we can just use setcheck right similarly for checkbox input um we will not need the props anymore but we will need the context pretty much like this and i can say if context is not present we throw the error otherwise i take out the checked and set checked from the context itself and then use it right so now if you go ahead and refresh this you can see it pretty much works fine even if it is embedded inside a div now you don't really have to worry about nesting at all because you know that you know context provides access to all the children because we are using a hook use context we get the setter and getter of the state directly right so that's a pretty cool use of the context api in terms of creating your own components which are compound components and you want them to work in a following way so yeah i mean that's that's a pretty neat approach let me know what you think about this approach and you can use that so if you try to again just to verify it one more time if you try to use something like this out of the component itself you're gonna see we get should be used inside checkbox because now our context is not defined so the use context returns undefined because we were never able to find the provider right in the first place that is why so yeah this works fine everything looks fine that is all for this video i'm gonna see you in the next one hey guys thank you so much for watching the free preview of the advanced react course i would highly highly recommend you if you can go ahead and get a go damn lead membership which will unlock the full complete react mastery learning path which you can go from learning paths and react mastery and you can pick up not only advanced react patterns but basically every single course and hands-on practice on this page this will unlock all the courses on the website on this learning path and all the practice projects as well it's as cheap as 13 a month or 999 inr if you're from india and if you like the content you can continue this course there's a lot more sections left performance um you know ecosystem all that stuff is still out there for you to try out with the hands-on practice which you get from the code damn interface like this so i would pretty much appreciate you because you will be supporting not only the platform but me in terms of creating more content in terms of getting more content creators to create content on code damn in terms of improving the practice hands-on interface so yeah i mean there's so much more coming up in the future in 2021 and i'm very excited to get you on board

Channel: codedamn

Views: 33,485

Rating: 4.8746209 out of 5

Keywords:

Id: MfIoAG3e7p4

Length: 58min 4sec (3484 seconds)

Published: Tue Feb 02 2021