1 00:00:01,140 --> 00:00:03,960 ‫Let's now learn about a simple performance 2 00:00:03,960 --> 00:00:07,710 ‫optimization technique which leverages the children prop 3 00:00:07,710 --> 00:00:12,270 ‫in order to prevent some components from re-rendering. 4 00:00:12,270 --> 00:00:15,660 ‫Now, this isn't the most used technique out there, 5 00:00:15,660 --> 00:00:18,750 ‫but it gives us actually surprising insights 6 00:00:18,750 --> 00:00:21,390 ‫into how React works internally. 7 00:00:21,390 --> 00:00:25,020 ‫And so that's why I wanted to share this with you. 8 00:00:25,020 --> 00:00:27,613 ‫Also, not many people know about 9 00:00:27,613 --> 00:00:29,970 ‫that this is how React works, 10 00:00:29,970 --> 00:00:33,063 ‫and so this makes this even more interesting. 11 00:00:34,500 --> 00:00:36,960 ‫Now, in this lecture, I want to bring in 12 00:00:36,960 --> 00:00:41,340 ‫this test component inside the test.js file 13 00:00:41,340 --> 00:00:44,673 ‫which was part of this project here in the beginning. 14 00:00:45,630 --> 00:00:49,953 ‫So this test component implements a very simple Counter, 15 00:00:51,000 --> 00:00:53,430 ‫so it has a button to increase the count 16 00:00:53,430 --> 00:00:56,010 ‫and it also displays that count, 17 00:00:56,010 --> 00:00:59,133 ‫and then the count also contains the SlowComponent. 18 00:01:00,060 --> 00:01:02,220 ‫And so what the SlowComponent does is to 19 00:01:02,220 --> 00:01:07,220 ‫basically create 100,000 words and place them into an array 20 00:01:07,375 --> 00:01:11,710 ‫and it then renders this 100,000 element long array 21 00:01:12,810 --> 00:01:15,240 ‫here in our user interface. 22 00:01:15,240 --> 00:01:20,130 ‫And so let's now include that here below our list 23 00:01:20,130 --> 00:01:21,963 ‫just to see what's gonna happen. 24 00:01:24,330 --> 00:01:27,810 ‫So this is basically an experiment with which 25 00:01:27,810 --> 00:01:31,950 ‫I will show you that optimization technique 26 00:01:31,950 --> 00:01:34,380 ‫that I was talking about. 27 00:01:34,380 --> 00:01:36,330 ‫So let's include that. 28 00:01:36,330 --> 00:01:39,423 ‫And it's not list, of course it is test. 29 00:01:40,260 --> 00:01:44,730 ‫So let's include the test here inside the list, 30 00:01:44,730 --> 00:01:47,463 ‫and then let's see what we get here. 31 00:01:48,600 --> 00:01:51,630 ‫And by the way, if your application 32 00:01:51,630 --> 00:01:54,150 ‫is taking way too long to load, 33 00:01:54,150 --> 00:01:57,820 ‫you can always quit the application and restart it 34 00:01:58,680 --> 00:02:03,150 ‫or you can try to reduce the number of elements right here. 35 00:02:03,150 --> 00:02:07,620 ‫So maybe 100,000 is a bit too much for your case, 36 00:02:07,620 --> 00:02:11,280 ‫and yeah, so if that doesn't work for you, 37 00:02:11,280 --> 00:02:14,670 ‫then just change the number of words there. 38 00:02:14,670 --> 00:02:18,810 ‫So you see we have like this infinite amount of words now, 39 00:02:18,810 --> 00:02:22,170 ‫and the idea here is that this simulates 40 00:02:22,170 --> 00:02:23,220 ‫a very SlowComponent. 41 00:02:24,120 --> 00:02:27,270 ‫And so let's see what happens as we click here. 42 00:02:27,270 --> 00:02:30,600 ‫So I click and then it takes like half a second 43 00:02:30,600 --> 00:02:33,510 ‫until the button actually updates. 44 00:02:33,510 --> 00:02:34,710 ‫So let me do that again. 45 00:02:36,870 --> 00:02:38,430 ‫So maybe you can hear my click. 46 00:02:38,430 --> 00:02:40,130 ‫Let me do that just one more time. 47 00:02:41,160 --> 00:02:44,640 ‫And probably for you, it also takes this long. 48 00:02:44,640 --> 00:02:48,573 ‫And so the reason for that is right here. 49 00:02:49,530 --> 00:02:52,830 ‫So basically here, each time we click on the button, 50 00:02:52,830 --> 00:02:54,870 ‫this state updates, 51 00:02:54,870 --> 00:02:58,680 ‫and so this entire component needs to get re-rendered. 52 00:02:58,680 --> 00:03:02,610 ‫And so therefore this SlowComponent is also re-rendered 53 00:03:02,610 --> 00:03:04,830 ‫each time that we click the button 54 00:03:04,830 --> 00:03:07,050 ‫even though this actually isn't really 55 00:03:07,050 --> 00:03:09,420 ‫dependent on the state. 56 00:03:09,420 --> 00:03:13,020 ‫So the SlowComponent does not need the state at all 57 00:03:13,020 --> 00:03:15,330 ‫but still it is being re-ordered 58 00:03:15,330 --> 00:03:18,843 ‫simply because it is inside this test component. 59 00:03:19,710 --> 00:03:23,310 ‫So, if you ever find yourself in a situation like this 60 00:03:23,310 --> 00:03:27,420 ‫where you have one kind of SlowComponent inside another one 61 00:03:27,420 --> 00:03:31,110 ‫which updates this one without it needing it, 62 00:03:31,110 --> 00:03:35,280 ‫this is where you can then use this optimization technique. 63 00:03:35,280 --> 00:03:38,220 ‫So what I'm gonna do is to take the 64 00:03:38,220 --> 00:03:40,293 ‫Counter functionality out, 65 00:03:42,870 --> 00:03:45,663 ‫so Counter like this, 66 00:03:47,640 --> 00:03:50,013 ‫and let me just copy all of it, 67 00:03:54,646 --> 00:03:56,970 ‫but here, not the SlowComponent, 68 00:03:56,970 --> 00:04:01,920 ‫but instead here I will now render the children prop 69 00:04:01,920 --> 00:04:05,100 ‫because we will now pass this SlowComponent 70 00:04:05,100 --> 00:04:07,203 ‫into the Counter as children. 71 00:04:08,490 --> 00:04:10,960 ‫So let me command all of this here out 72 00:04:14,130 --> 00:04:15,970 ‫and let's return a new diff 73 00:04:17,100 --> 00:04:22,100 ‫here with the same h1, just so it all looks the same. 74 00:04:22,560 --> 00:04:24,963 ‫And then here comes the Counter. 75 00:04:25,980 --> 00:04:27,390 ‫So just like this. 76 00:04:27,390 --> 00:04:30,363 ‫And then this is where we place the SlowComponent. 77 00:04:32,130 --> 00:04:35,340 ‫And so this actually looks exactly the same. 78 00:04:35,340 --> 00:04:39,570 ‫So the componentry will also be exactly the same 79 00:04:39,570 --> 00:04:44,220 ‫where we see here that basically we still have the h1, 80 00:04:44,220 --> 00:04:47,850 ‫the button and then in the UI, the SlowComponent. 81 00:04:47,850 --> 00:04:49,680 ‫So this entire list here. 82 00:04:49,680 --> 00:04:54,510 ‫However, it will now work in a completely different way. 83 00:04:54,510 --> 00:04:57,660 ‫So let's see what happens now when I click here 84 00:04:57,660 --> 00:05:01,410 ‫and you see that it is instant, right? 85 00:05:01,410 --> 00:05:05,490 ‫So this means that actually probably this list here 86 00:05:05,490 --> 00:05:07,920 ‫is no longer being re-rendered, 87 00:05:07,920 --> 00:05:11,790 ‫and we can actually prove that by clicking here now 88 00:05:11,790 --> 00:05:14,220 ‫on the Start profiling button, 89 00:05:14,220 --> 00:05:17,380 ‫then updating the state by clicking on the button 90 00:05:18,930 --> 00:05:20,970 ‫and then stopping it here. 91 00:05:20,970 --> 00:05:23,160 ‫So here is of course the Counter. 92 00:05:23,160 --> 00:05:26,040 ‫So the Counter component needed to update, 93 00:05:26,040 --> 00:05:30,300 ‫but then we see that the SlowComponent did not render. 94 00:05:30,300 --> 00:05:32,130 ‫So why is that? 95 00:05:32,130 --> 00:05:36,300 ‫Even though basically our JSX is very similar, 96 00:05:36,300 --> 00:05:39,390 ‫so the structure of the output is very similar, 97 00:05:39,390 --> 00:05:42,090 ‫and indeed it does look exactly the same 98 00:05:42,090 --> 00:05:47,090 ‫as it looked like here in the UI previously, right? 99 00:05:47,490 --> 00:05:49,290 ‫So the only thing that we changed is 100 00:05:49,290 --> 00:05:54,210 ‫that we no longer have SlowComponent here like this, 101 00:05:54,210 --> 00:05:57,180 ‫but instead we pass it in as a children. 102 00:05:57,180 --> 00:06:00,720 ‫So then here we display it as a children. 103 00:06:00,720 --> 00:06:03,720 ‫So why does this work this way? 104 00:06:03,720 --> 00:06:06,420 ‫So why is suddenly React no longer 105 00:06:06,420 --> 00:06:09,150 ‫re-rendering this component? 106 00:06:09,150 --> 00:06:12,690 ‫Well, again, this element, the SlowComponent, 107 00:06:12,690 --> 00:06:16,500 ‫has this time been passed in as a children prop. 108 00:06:16,500 --> 00:06:19,980 ‫And so what this means is that this component here 109 00:06:19,980 --> 00:06:22,230 ‫was actually already created 110 00:06:22,230 --> 00:06:25,470 ‫before the Counter component re-rendered. 111 00:06:25,470 --> 00:06:29,190 ‫And so therefore, there's no way in which this component 112 00:06:29,190 --> 00:06:31,590 ‫could have been affected by the state change 113 00:06:31,590 --> 00:06:34,410 ‫in the Counter, right? 114 00:06:34,410 --> 00:06:39,270 ‫So again, as React sees this piece of JSX here, 115 00:06:39,270 --> 00:06:41,640 ‫it will basically immediately create 116 00:06:41,640 --> 00:06:43,860 ‫the SlowComponent right here 117 00:06:43,860 --> 00:06:46,530 ‫and then pass it into the Counter. 118 00:06:46,530 --> 00:06:48,960 ‫So all while rendering. 119 00:06:48,960 --> 00:06:52,020 ‫And then as we click here on this button, 120 00:06:52,020 --> 00:06:54,750 ‫the Counter is of course re-rendered, 121 00:06:54,750 --> 00:06:57,540 ‫but this component again has already been 122 00:06:57,540 --> 00:06:59,250 ‫pressed in as a prop, 123 00:06:59,250 --> 00:07:01,860 ‫So it has already been created before 124 00:07:01,860 --> 00:07:05,790 ‫and so it cannot be affected by that state update. 125 00:07:05,790 --> 00:07:07,170 ‫It already exists. 126 00:07:07,170 --> 00:07:10,530 ‫And so that is the reason why React then bails out of 127 00:07:10,530 --> 00:07:13,380 ‫re-rendering this children component 128 00:07:13,380 --> 00:07:15,600 ‫because nothing could have changed 129 00:07:15,600 --> 00:07:18,330 ‫inside of the SlowComponent. 130 00:07:18,330 --> 00:07:21,270 ‫So React is smart enough like this 131 00:07:21,270 --> 00:07:25,650 ‫and can therefore decide not to re-render this. 132 00:07:25,650 --> 00:07:26,610 ‫Okay? 133 00:07:26,610 --> 00:07:28,890 ‫So hopefully this made sense 134 00:07:28,890 --> 00:07:32,220 ‫and that you found it as interesting as I did. 135 00:07:32,220 --> 00:07:36,030 ‫So when I first found out about this not too long ago, 136 00:07:36,030 --> 00:07:39,420 ‫I was quite surprised that React works this way. 137 00:07:39,420 --> 00:07:42,930 ‫And so you might actually find situations like this 138 00:07:42,930 --> 00:07:45,240 ‫in the real world in your own code. 139 00:07:45,240 --> 00:07:49,830 ‫And so in that case, just be aware that this trick exists. 140 00:07:49,830 --> 00:07:53,490 ‫So all you have to do is to refactor your code a little bit 141 00:07:53,490 --> 00:07:55,503 ‫so that you can pass the SlowComponent, 142 00:07:56,490 --> 00:07:59,970 ‫whatever it is named in your case, as a prop. 143 00:07:59,970 --> 00:08:02,043 ‫And it could also be some other prop. 144 00:08:03,060 --> 00:08:07,200 ‫So you can call this like, show this, or whatever 145 00:08:07,200 --> 00:08:11,343 ‫and then you pass the SlowComponent in there like this. 146 00:08:12,930 --> 00:08:14,880 ‫So that would work exactly the same 147 00:08:14,880 --> 00:08:18,390 ‫because then also React would already have been 148 00:08:18,390 --> 00:08:21,510 ‫created this component here 149 00:08:21,510 --> 00:08:25,053 ‫before anything ever happens inside the Counter. 150 00:08:27,240 --> 00:08:28,170 ‫All right? 151 00:08:28,170 --> 00:08:30,390 ‫And this is really all I wanted to do 152 00:08:30,390 --> 00:08:32,520 ‫with this test component. 153 00:08:32,520 --> 00:08:36,030 ‫So let's now get our application back to normal. 154 00:08:36,030 --> 00:08:39,960 ‫But this actually has another very interesting application 155 00:08:39,960 --> 00:08:43,710 ‫in the way that our context works right now. 156 00:08:43,710 --> 00:08:46,980 ‫So let me again start profiling here 157 00:08:46,980 --> 00:08:51,980 ‫and just search once and then stop this. 158 00:08:52,290 --> 00:08:55,980 ‫And so here we see again that these two components 159 00:08:55,980 --> 00:09:00,180 ‫have not been re-rendered, but why is that? 160 00:09:00,180 --> 00:09:02,640 ‫Why have they not been re-rendered? 161 00:09:02,640 --> 00:09:04,980 ‫I mean, there has been a state update 162 00:09:04,980 --> 00:09:08,883 ‫inside the PostProvider component, right? 163 00:09:09,750 --> 00:09:14,190 ‫So this PostProvider right here is actually 164 00:09:14,190 --> 00:09:16,350 ‫just a regular component. 165 00:09:16,350 --> 00:09:18,330 ‫And so when we searched here, 166 00:09:18,330 --> 00:09:22,710 ‫we updated this state which then re-rendered this component. 167 00:09:22,710 --> 00:09:25,020 ‫And so therefore all the child components 168 00:09:25,020 --> 00:09:28,590 ‫should have re-rendered as well, right? 169 00:09:28,590 --> 00:09:32,100 ‫So all of these should have re-rendered as well 170 00:09:32,100 --> 00:09:34,140 ‫if we follow that logic, 171 00:09:34,140 --> 00:09:38,220 ‫because, again, all of them are child components. 172 00:09:38,220 --> 00:09:42,600 ‫However, we see, again, that these two did not re-render. 173 00:09:42,600 --> 00:09:44,820 ‫And the reason for that is exactly the same 174 00:09:44,820 --> 00:09:48,243 ‫that we saw earlier with the test and the SlowComponent. 175 00:09:50,010 --> 00:09:53,790 ‫So the reason again is that all of these 176 00:09:53,790 --> 00:09:55,860 ‫child components here were actually 177 00:09:55,860 --> 00:09:59,760 ‫passed into the PostProvider as children. 178 00:09:59,760 --> 00:10:03,150 ‫And so we are in the exact same situation as before 179 00:10:03,150 --> 00:10:06,870 ‫where all these child components were already created 180 00:10:06,870 --> 00:10:10,350 ‫before they were passed here into this component. 181 00:10:10,350 --> 00:10:14,130 ‫And so then React once again bails out of re-rendering 182 00:10:14,130 --> 00:10:16,950 ‫all of them because they couldn't have possibly 183 00:10:16,950 --> 00:10:19,350 ‫been affected by any state change, 184 00:10:19,350 --> 00:10:22,320 ‫unless, of course, they do actually consume 185 00:10:22,320 --> 00:10:24,060 ‫the context itself. 186 00:10:24,060 --> 00:10:26,700 ‫So that's the case for this one. 187 00:10:26,700 --> 00:10:28,410 ‫Well, now we cannot see that 188 00:10:28,410 --> 00:10:31,470 ‫because I reloaded the page in the meantime, 189 00:10:31,470 --> 00:10:35,670 ‫so I would need to turn this setting back on, 190 00:10:35,670 --> 00:10:38,400 ‫but this only works for the next time. 191 00:10:38,400 --> 00:10:40,593 ‫Well, let's just do that now again. 192 00:10:45,300 --> 00:10:46,263 ‫All right. 193 00:10:47,220 --> 00:10:52,220 ‫So yeah, now we can see that, make this a bit bigger. 194 00:10:52,380 --> 00:10:54,750 ‫And so this one here did re-render again 195 00:10:54,750 --> 00:10:57,660 ‫because the state has updated, 196 00:10:57,660 --> 00:10:59,610 ‫and then this one has changed only 197 00:10:59,610 --> 00:11:01,890 ‫because the context has changed, 198 00:11:01,890 --> 00:11:05,550 ‫not because the parent component has re-rendered. 199 00:11:05,550 --> 00:11:08,340 ‫So the same here, and the same here. 200 00:11:08,340 --> 00:11:11,460 ‫While again, these ones were not re-rendered 201 00:11:11,460 --> 00:11:13,770 ‫because they were passed in as children 202 00:11:13,770 --> 00:11:16,170 ‫and so they were already created 203 00:11:16,170 --> 00:11:19,740 ‫before the PostProvider was even created. 204 00:11:19,740 --> 00:11:22,080 ‫And so they could not have been affected 205 00:11:22,080 --> 00:11:24,213 ‫by any state change in there. 206 00:11:25,620 --> 00:11:29,100 ‫Okay, so I hope that made sense 207 00:11:29,100 --> 00:11:32,700 ‫and that you keep this technique in the back of your mind 208 00:11:32,700 --> 00:11:36,510 ‫even though it is probably not used all the time. 209 00:11:36,510 --> 00:11:38,520 ‫But it's very, very interesting, 210 00:11:38,520 --> 00:11:42,720 ‫and I think this like puts you in the top 1% of 211 00:11:42,720 --> 00:11:44,910 ‫React developers when it comes to 212 00:11:44,910 --> 00:11:46,833 ‫knowing about this kind of stuff.