1 00:00:01,110 --> 00:00:03,570 ‫We have used the React developer tools 2 00:00:03,570 --> 00:00:06,000 ‫all the time throughout this course, 3 00:00:06,000 --> 00:00:10,650 ‫but actually, we have only used half of them until now. 4 00:00:10,650 --> 00:00:15,213 ‫And so let's now meet the other half, which is the profiler. 5 00:00:16,650 --> 00:00:19,470 ‫So, for the first half of this section, 6 00:00:19,470 --> 00:00:23,913 ‫let's actually bring back our Atomic Blog project. 7 00:00:26,010 --> 00:00:28,653 ‫So let's open that up in VS code, 8 00:00:30,030 --> 00:00:33,540 ‫And so I'm here in the app.js file, 9 00:00:33,540 --> 00:00:35,763 ‫so the latest file that we wrote. 10 00:00:36,630 --> 00:00:40,803 ‫So let's close that and let's npm start it. 11 00:00:46,590 --> 00:00:48,843 ‫Okay, there it is. 12 00:00:49,710 --> 00:00:53,580 ‫And so let's actually make this window a bit bigger, 13 00:00:53,580 --> 00:00:56,853 ‫so that we can actually see our developer tools. 14 00:00:57,840 --> 00:00:59,610 ‫So, as I mentioned in the beginning, 15 00:00:59,610 --> 00:01:03,510 ‫we have used the components React developer tool a lot, 16 00:01:03,510 --> 00:01:06,240 ‫but we have never used the other part. 17 00:01:06,240 --> 00:01:08,433 ‫So this profiler right here. 18 00:01:09,270 --> 00:01:10,710 ‫So with the profiler, 19 00:01:10,710 --> 00:01:14,580 ‫we can basically analyze renders and re-renders. 20 00:01:14,580 --> 00:01:17,880 ‫So we can see which components have rendered, 21 00:01:17,880 --> 00:01:19,650 ‫see why they're rendered, 22 00:01:19,650 --> 00:01:22,353 ‫and also how long each render took. 23 00:01:23,220 --> 00:01:25,740 ‫Now in practice, we use the profiler 24 00:01:25,740 --> 00:01:28,920 ‫by clicking here on this record button, 25 00:01:28,920 --> 00:01:31,080 ‫and then we update some state. 26 00:01:31,080 --> 00:01:34,920 ‫But before we go do that, let's change the settings here. 27 00:01:34,920 --> 00:01:38,730 ‫And coming to this last tab, which says "profiler," 28 00:01:38,730 --> 00:01:41,550 ‫and then here we want to activate a setting, 29 00:01:41,550 --> 00:01:45,630 ‫which says that it should record why each component rendered 30 00:01:45,630 --> 00:01:47,760 ‫while it was profiling. 31 00:01:47,760 --> 00:01:50,790 ‫And so basically, this will give us one of the three reasons 32 00:01:50,790 --> 00:01:53,490 ‫that we talked about in the previous lecture, 33 00:01:53,490 --> 00:01:56,370 ‫of why each component has re-rendered. 34 00:01:56,370 --> 00:01:59,880 ‫So whether it was a state update, a context update, 35 00:01:59,880 --> 00:02:01,773 ‫or a parent re-rendering. 36 00:02:02,760 --> 00:02:04,290 ‫All right? 37 00:02:04,290 --> 00:02:06,600 ‫Now, if you reload the page, then you will have to 38 00:02:06,600 --> 00:02:10,620 ‫reset that setting, actually, which is a bit annoying. 39 00:02:10,620 --> 00:02:13,380 ‫But anyway, now I will start recording, 40 00:02:13,380 --> 00:02:16,590 ‫and then I will update the state of the page 41 00:02:16,590 --> 00:02:18,333 ‫by typing in here. 42 00:02:19,260 --> 00:02:21,300 ‫So let's type three times, 43 00:02:21,300 --> 00:02:25,230 ‫so we see how that actually looks like in the profiler, 44 00:02:25,230 --> 00:02:28,800 ‫and then we click there to stop the recording. 45 00:02:28,800 --> 00:02:31,800 ‫And then here is our flamegraph. 46 00:02:31,800 --> 00:02:34,590 ‫So, we can see the result in the flamegraph, 47 00:02:34,590 --> 00:02:36,723 ‫and here in this ranked graph. 48 00:02:37,620 --> 00:02:39,360 ‫So starting with the flamegraph, 49 00:02:39,360 --> 00:02:41,160 ‫this is basically just another way 50 00:02:41,160 --> 00:02:43,920 ‫of representing the componentry. 51 00:02:43,920 --> 00:02:47,460 ‫So as the parent, we have app, then we have our provider, 52 00:02:47,460 --> 00:02:49,860 ‫and inside the provider we have, indeed, 53 00:02:49,860 --> 00:02:52,440 ‫the header and the main, which in turn, 54 00:02:52,440 --> 00:02:54,840 ‫contain all of these components. 55 00:02:54,840 --> 00:02:56,673 ‫So just like we have here. 56 00:02:58,170 --> 00:02:59,610 ‫Now, what's special about this 57 00:02:59,610 --> 00:03:02,160 ‫is that some components are actually colored 58 00:03:02,160 --> 00:03:04,320 ‫and some are gray. 59 00:03:04,320 --> 00:03:07,320 ‫So the gray components are the ones that did 60 00:03:07,320 --> 00:03:11,070 ‫actually not render while the application re-rendered. 61 00:03:11,070 --> 00:03:14,790 ‫So main posts and app did not re-render, 62 00:03:14,790 --> 00:03:16,800 ‫but all these others did. 63 00:03:16,800 --> 00:03:18,840 ‫And the more yellow the color is, 64 00:03:18,840 --> 00:03:21,420 ‫the longer it took to re-render. 65 00:03:21,420 --> 00:03:24,930 ‫So the PostProvider, we can see, took the longest. 66 00:03:24,930 --> 00:03:27,942 ‫Now, in order to rank them, we can, as the name says, 67 00:03:27,942 --> 00:03:30,420 ‫use the Ranked tab here. 68 00:03:30,420 --> 00:03:33,780 ‫And so here, we can then very clearly see, for example, 69 00:03:33,780 --> 00:03:35,340 ‫that some of these components 70 00:03:35,340 --> 00:03:37,770 ‫were really, really fast to render, 71 00:03:37,770 --> 00:03:40,320 ‫while this one here took a bit longer. 72 00:03:40,320 --> 00:03:43,290 ‫And even though that's less than a millisecond, 73 00:03:43,290 --> 00:03:44,913 ‫which is really nothing. 74 00:03:46,680 --> 00:03:49,320 ‫Now, thanks to the setting that we activated 75 00:03:49,320 --> 00:03:50,220 ‫in the beginning, 76 00:03:50,220 --> 00:03:54,205 ‫we can also see why each of the components re-rendered. 77 00:03:54,205 --> 00:03:56,760 ‫So here, for example, we can see 78 00:03:56,760 --> 00:04:01,110 ‫that the PostProvider re-rendered because Hook 2 changed. 79 00:04:01,110 --> 00:04:04,260 ‫And so the Hook 2 is simply the use date hook, 80 00:04:04,260 --> 00:04:07,323 ‫which is storing this search query here. 81 00:04:09,210 --> 00:04:12,000 ‫So then here, the provider usually doesn't say, 82 00:04:12,000 --> 00:04:13,680 ‫and then here the header re-rendered 83 00:04:13,680 --> 00:04:15,363 ‫because context changed. 84 00:04:16,590 --> 00:04:18,663 ‫So let's check that out, actually, here. 85 00:04:20,280 --> 00:04:23,850 ‫So indeed, the header is consuming the context, 86 00:04:23,850 --> 00:04:25,620 ‫and so therefore it changed 87 00:04:25,620 --> 00:04:30,030 ‫as we updated the state here in the context, right? 88 00:04:30,030 --> 00:04:33,720 ‫And the results, and this form, and the list, 89 00:04:33,720 --> 00:04:36,480 ‫all of them are consuming the context. 90 00:04:36,480 --> 00:04:39,420 ‫And so therefore, they then also updated 91 00:04:39,420 --> 00:04:41,790 ‫as the component was updated 92 00:04:41,790 --> 00:04:44,160 ‫while the main and the post components 93 00:04:44,160 --> 00:04:46,050 ‫are not consuming the context, 94 00:04:46,050 --> 00:04:48,423 ‫and so they did not re-render. 95 00:04:49,590 --> 00:04:52,803 ‫So this is how we can basically analyze this flamegraph. 96 00:04:53,970 --> 00:04:56,730 ‫Now up here, we have the different commits, 97 00:04:56,730 --> 00:04:57,960 ‫how they are called, 98 00:04:57,960 --> 00:05:01,830 ‫or in other words, each of them here is one re-render. 99 00:05:01,830 --> 00:05:04,290 ‫So I think that's easier to understand. 100 00:05:04,290 --> 00:05:07,020 ‫And so since we did three times the same thing here, 101 00:05:07,020 --> 00:05:11,010 ‫we should expect them to look basically the same. 102 00:05:11,010 --> 00:05:13,830 ‫Now, the timings have changed here for some reason, 103 00:05:13,830 --> 00:05:16,170 ‫but the components that have actually rendered 104 00:05:16,170 --> 00:05:19,173 ‫and not rendered are exactly the same. 105 00:05:20,640 --> 00:05:21,870 ‫All right? 106 00:05:21,870 --> 00:05:24,180 ‫And now let's try something else. 107 00:05:24,180 --> 00:05:28,470 ‫So for that, we can clear and then record again. 108 00:05:28,470 --> 00:05:29,850 ‫And now let's simply click here 109 00:05:29,850 --> 00:05:32,340 ‫on this fake dark mode button. 110 00:05:32,340 --> 00:05:34,329 ‫So just one re-render, 111 00:05:34,329 --> 00:05:38,018 ‫and so then here we only get this one column. 112 00:05:38,018 --> 00:05:41,940 ‫And so this time, as we can see here, every single component 113 00:05:41,940 --> 00:05:46,470 ‫has re-rendered, which makes sense because this date update 114 00:05:46,470 --> 00:05:48,750 ‫actually happened right here 115 00:05:48,750 --> 00:05:51,450 ‫in the main parent component. 116 00:05:51,450 --> 00:05:53,370 ‫So, here in the app component. 117 00:05:53,370 --> 00:05:56,335 ‫That's why here it says that hook number one changed, 118 00:05:56,335 --> 00:05:58,740 ‫which is this one. 119 00:05:58,740 --> 00:06:01,560 ‫And then we can see here, for example, 120 00:06:01,560 --> 00:06:06,150 ‫this one did render because the context changes, or changed, 121 00:06:06,150 --> 00:06:08,280 ‫which actually seems a bit strange, 122 00:06:08,280 --> 00:06:10,350 ‫but we will come back to this later, 123 00:06:10,350 --> 00:06:13,980 ‫so we will understand why React is saying this. 124 00:06:13,980 --> 00:06:16,950 ‫So all the components that are consuming the state 125 00:06:16,950 --> 00:06:19,770 ‫actually are telling us that they have re-rendered 126 00:06:19,770 --> 00:06:22,020 ‫because the context has changed, 127 00:06:22,020 --> 00:06:22,920 ‫while these two, 128 00:06:22,920 --> 00:06:26,250 ‫which before were gray, are now also colored, 129 00:06:26,250 --> 00:06:27,990 ‫and these two did re-render, 130 00:06:27,990 --> 00:06:30,690 ‫because the parent component rendered. 131 00:06:30,690 --> 00:06:34,151 ‫And so again, when the parent component of the application, 132 00:06:34,151 --> 00:06:39,030 ‫so the component at the top of the componentry, re-renders, 133 00:06:39,030 --> 00:06:43,293 ‫then all the child components will re-render, as well. 134 00:06:44,700 --> 00:06:47,220 ‫Okay, let's just put this back. 135 00:06:47,220 --> 00:06:49,773 ‫Let's delete, and let's try another one. 136 00:06:52,020 --> 00:06:53,070 ‫So one, 137 00:06:53,070 --> 00:06:54,450 ‫two, three, 138 00:06:54,450 --> 00:06:55,683 ‫and four. 139 00:06:56,640 --> 00:06:58,140 ‫So, let's see. 140 00:06:58,140 --> 00:06:59,370 ‫And indeed, here we have, 141 00:06:59,370 --> 00:07:01,923 ‫or four state updates, 142 00:07:02,910 --> 00:07:04,593 ‫or four re-renders. 143 00:07:05,580 --> 00:07:08,010 ‫So, in the first three we can see 144 00:07:08,010 --> 00:07:11,360 ‫that only the form at post re-rendered. 145 00:07:11,360 --> 00:07:15,783 ‫And so, that is, well, let's see where that is. 146 00:07:16,980 --> 00:07:21,030 ‫So, that is because these are local pieces of state, 147 00:07:21,030 --> 00:07:24,600 ‫and also this component has no child components. 148 00:07:24,600 --> 00:07:27,480 ‫And so, then only this one re-rendered 149 00:07:27,480 --> 00:07:30,720 ‫the three times that we wrote something there. 150 00:07:30,720 --> 00:07:33,390 ‫But then, here we have a similar picture 151 00:07:33,390 --> 00:07:34,950 ‫to what we had before. 152 00:07:34,950 --> 00:07:37,860 ‫So not all the components have re-rendered here, 153 00:07:37,860 --> 00:07:41,550 ‫like the footer, and the main component did not re-render 154 00:07:41,550 --> 00:07:45,090 ‫as a result of adding a new post. 155 00:07:45,090 --> 00:07:46,170 ‫Okay? 156 00:07:46,170 --> 00:07:48,210 ‫So feel free to play around 157 00:07:48,210 --> 00:07:51,150 ‫with this new tool here as much as you'd like, 158 00:07:51,150 --> 00:07:54,540 ‫as this will be pretty important throughout this section, 159 00:07:54,540 --> 00:07:55,860 ‫and also later, 160 00:07:55,860 --> 00:07:59,880 ‫once you start building bigger and more heavy applications, 161 00:07:59,880 --> 00:08:03,840 ‫which might require some performance optimization. 162 00:08:03,840 --> 00:08:06,690 ‫So, we will use this tool throughout this section, 163 00:08:06,690 --> 00:08:10,770 ‫and so make sure that you play around, again, 164 00:08:10,770 --> 00:08:12,000 ‫with this a bit more. 165 00:08:12,000 --> 00:08:14,460 ‫And then let's move on to the next lecture 166 00:08:14,460 --> 00:08:18,213 ‫to talk about our first small optimization trick.