Use Component Composition in React to fix Prop Drilling and Re-renders

hey fellow developers welcome back after a long long time so in this video we'll learn how one can leverage component composition to write better and faster react code so without any delay let's get started with our video okay so let's first see what is component composition to be honest this is a very simple concept and I am damn sure you all have been using this pattern knowingly or unknowingly so component composition is basically passing a component as a prop to some other components yeah it's that simple so now let's look at an example to visualize the pattern more so to give you all an example I have created a very simple button component which I am going to import here now if we go to this component you can see that the component accepts two props handle click and children and by the name I think you already know that handle click is basically a function which will be triggered when the button is clicked and children is like when we write anything inside of the custom button component that corresponding text will become the children prompt so here as you can see I've imported this annuity like this so I'm just going to do it this way okay and whatever I write inside of the custom button component that will become the children prop so here I'm gonna write give me okay and you can see that I have a button with click me text inside of it so this click me is getting passed to this custom button component as the children proc this is a very common react pattern and for the handle click prop I'm just gonna pass a very simple callback function which basically says hi hello developers one clicked so let's just click here and check so yes like I have the message right so now coming to what is component composition now I'm passing this piece of text as the children provide so this you can assume it to be like a component so basically we are passing the component to the custom button component and the prop is children and I know like uh you can ask me that hey Manish like this is just a text this is not a component so to better visualize let's do it this way so now like I have wrap this piece of text inside a fragment and let's see now I'm gonna add a photo before this text right so for that I'm going to use the react logo which we have and you can see that this is an SVG so to use an SVG Insider react component we have to import that SVG as a component itself so to do that I'm going to do import react component as logo from logo.svg and now you can use this logo inside here so now you can see right that this button has a logo and a text so now I think you all can better visualize that this is in fact a component right so we are passing this as a component to the custom button component with the help of the children prompt so this is component composition now you tell me haven't you already used this button yes right but now let's learn the concepts in detail so that you can leverage this power at will okay so now what does component composition actually solves so it solves two of the most common react problems that we all encounter on a daily basis first is the issue of prop Drilling and the second one is the issue of re-renders so one by one we'll check how we can use component composition to mitigate both these issues first let's see how we can solve the issue of prop drilling using component composition so in this example I have a component called welcome page and I'm also passing a prop called username so this prop is nothing but a random name in our case the name is John so now if we go to the welcome page component you can see that we get the prop and we are sending it to the welcome message component now again if we go to the welcome message component you can see that this is where we actually use the username prop to show some meaningful text which is like hey John how are you I hope you're doing good right so if we come back again to the welcome page component you can visualize that this component has no use of the username prop apart from sending it to the welcome message component so this is a classic example of prop drilling so basically we have three levels of component hierarchy first is the app on the first level on the second level we have the welcome page component right and on the third level we have the welcome message component now let's use the power of component composition to streamline the component hierarchy and solve the issue of prop drilling so the component hierarchy that we currently have is something like this on the first level we have our app component on the second level we have our welcome page component and finally on the third level we have our welcome message component so our goal should be to transform this component hierarchy into something like this so here as you can see we have our parent app component and the app component has two children welcome page component and the welcome message component so by having a component architecture like this we can solve the issue of prop drilling now to achieve this component hierarchy or this architecture we have to use component composition so let's see how we can do that so going back up what I'm thinking is that what if we can pass the welcome message component directly to this welcome page component itself so for that I am going to use a new prop and let's name it as intro text and then I'm going to import the welcome message component right and if we go back to this component welcome message you can see that it accepts the username problem so instead of passing it to the welcome page component like this we can pass it directly to the welcome message component right so now this welcome page component accepts this intro text prop so let's go here and let's change this username prop to intro text and as you can see this intro text is nothing but a component itself so what we can do is we can directly call this over here and this gives us the exact same result with this we have solved the issue of prop drilling now going back to our app component do you really think that we have used component composition to solve this issue yesterday because as you can see we are passing a component as a prop to a different component which in our case is well complete component right so we have successfully used component composition to solve the most common or you can say the one of the most common issues in react that we all face which is problem drilling now let's see with an example how we can solve the issue of re-renders using component composition again okay so let's first visualize the issue of re-renders using a very simple example so as you can see over here I have something called a scroll progress and below I have a string called some content which is rendering a thousand times I'm doing this to basically create a very huge scroll bar as you can see so when I scroll it shows me the scroll position of the page so now if we go back to our code which is here and I'm going to add a line called console.log and inside of it I'm gonna add a string I am rendering now if we go back to our browser and open up the console you can see that as I scroll this string is constantly getting printed which indicates what it indicates that the page is getting constantly re-rendered whenever we scroll right so now we will look to fix this issue using component composition so before actually solving the issue one thing to keep in mind is that what I mean by re-renders is this piece of component or you can say the nodes inside of this component is not getting changed when I scroll right which means what which means that the actual Dom is not getting changed what is getting rendered is the virtual Dom so what is happening is that whenever I scroll react re-rentice this component and in doing that it checks the virtual Dom and the actual Dom and since nothing is getting changed between these two Doms the actual Dom is not getting updated so in reality the performance impact might not be that high but yes it's still getting computed by react so we are trying to solve or you can say minimize the re-renders which react is performing when we scroll okay so now let's again get back to solving this issue so now I'm going to create a new component and I'm going to do it on the same file itself just for the sake of demonstration so let's name this component as scroll progress and what I'm going to return is basically this HTML element and let's take all this logic that we've written inside this app component over to our scroll progress component so now we have two components which is app and install progress so I said that we're going to solve it using component composition so now what I will do is I'm going to set a new prop which is children and I'm gonna show these children over here let's do a Rex fragment right make sense okay so now let's use this scroll progress component inside of this app component let's delete this unnecessary div and now if I put this console log inside of the app component and scroll the page you can see that this component is getting rendered just twice not a thousand times so now you can ask me did we actually use component composition to solve the issue of re-render yes right because here I have created a component called scroll progress and I've put all the scrolling logic inside of this component itself and now I'm passing this children prop so if you remember the first example which I showed which is which was of a custom button so there what I did was that whatever we wrapped inside of a component it becomes the children right so similarly in this case also this piece of code becomes the children prop which is this and then I'm using this children prop over here like this so why does it solve the issue of re-render to understand this you first have to know that what causes a re-render in react so a component re-render happens in react when a component's props change or when its state change so it can happen in either of these two cases so in this example if you see that for our app component we don't have any state inside of it right and if we go to the scroll progress component you can see that it has only one prop which is children and in this case the children prop is not getting changed it is constant so this means that there is no prop change happening and also there is no State change happening and because of this the app component is not getting rendered multiple times as it was happening before we have extracted all the logic right all the logic which was earlier in the app component itself to its own component which is scroll progress so now any component which we Define here Will re-render but if we use a pattern something like this then that re-render won't happen because the prop is not getting changed so with this we have solved the issue of re-renders as well using component composition and also we have come to the end of our video so if you have learned something valuable make sure to subscribe share it with your friends and see you on the next video Until then take care bye

Channel: FrontendInterviewPro

Views: 113

Keywords: how to fix prop drilling in react, what is prop drilling in react, how to fix re-renders in react, react, what is react, react full course

Id: YVw_639IiM8

Length: 12min 6sec (726 seconds)

Published: Tue Aug 22 2023