1 00:00:01,309 --> 00:00:04,080 ‫In this lecture, we're gonna quickly set up 2 00:00:04,080 --> 00:00:06,210 ‫yet another small project 3 00:00:06,210 --> 00:00:08,670 ‫just to demonstrate some of the things 4 00:00:08,670 --> 00:00:11,193 ‫that we just talked about, Useeffect. 5 00:00:12,750 --> 00:00:16,710 ‫And in our starter files, we actually have again, 6 00:00:16,710 --> 00:00:19,380 ‫the complete project already. 7 00:00:19,380 --> 00:00:22,320 ‫So come here to this folder, workout timer. 8 00:00:22,320 --> 00:00:26,880 ‫And then here, the starter already contains the entire code. 9 00:00:26,880 --> 00:00:30,363 ‫So let's just grab that, paste that here. 10 00:00:31,860 --> 00:00:35,783 ‫So this one is called the workout timer. 11 00:00:38,490 --> 00:00:42,033 ‫And then let's get that into our VS code. 12 00:00:45,120 --> 00:00:46,623 ‫And there we go. 13 00:00:47,550 --> 00:00:48,570 ‫And once again, 14 00:00:48,570 --> 00:00:51,900 ‫just like we did with our previous small project 15 00:00:51,900 --> 00:00:56,100 ‫let's start by checking how this project was created. 16 00:00:56,100 --> 00:00:59,460 ‫And as we see here from this react scripts, 17 00:00:59,460 --> 00:01:02,070 ‫it means that this project was again 18 00:01:02,070 --> 00:01:05,340 ‫created with Create-React-App. 19 00:01:05,340 --> 00:01:10,340 ‫And so let's open up our terminal and run or start command. 20 00:01:14,880 --> 00:01:19,523 ‫So if it was with vite, then it would be npm run dev right? 21 00:01:20,670 --> 00:01:25,590 ‫However, we forgot that first we need to actually install 22 00:01:25,590 --> 00:01:26,763 ‫the dependencies. 23 00:01:27,990 --> 00:01:29,460 ‫So npm install, 24 00:01:29,460 --> 00:01:33,420 ‫because of course whenever you get a new project code 25 00:01:33,420 --> 00:01:34,500 ‫from somewhere, 26 00:01:34,500 --> 00:01:37,740 ‫it never comes with the node modules folder. 27 00:01:37,740 --> 00:01:41,490 ‫So you'll always have to install that yourself 28 00:01:41,490 --> 00:01:45,573 ‫and now that that's done, let's run NPM start. 29 00:01:47,160 --> 00:01:49,920 ‫And this always takes a lot of time, 30 00:01:49,920 --> 00:01:52,800 ‫loading up the project for the first time 31 00:01:52,800 --> 00:01:55,920 ‫and this time is it was actually fast 32 00:01:55,920 --> 00:01:58,410 ‫but sometimes it is a bit slow. 33 00:01:58,410 --> 00:02:02,370 ‫And so that's one of the advantages of using vite. 34 00:02:02,370 --> 00:02:06,810 ‫Okay, now the first thing that I usually like to do, 35 00:02:06,810 --> 00:02:09,960 ‫in order to get myself familiar with a new project 36 00:02:09,960 --> 00:02:12,360 ‫is to just check out the componentry 37 00:02:12,360 --> 00:02:15,330 ‫with this dev tool right here. 38 00:02:15,330 --> 00:02:18,840 ‫So we see that all we have is this app component, 39 00:02:18,840 --> 00:02:21,690 ‫the toggle sounds component up there 40 00:02:21,690 --> 00:02:23,403 ‫and this calculator. 41 00:02:24,630 --> 00:02:25,590 ‫All right? 42 00:02:25,590 --> 00:02:30,590 ‫And then of course we need to go check out the code as well. 43 00:02:30,990 --> 00:02:33,780 ‫And so that is actually my challenge for you 44 00:02:33,780 --> 00:02:35,640 ‫in this lecture. 45 00:02:35,640 --> 00:02:39,240 ‫So just like before in that block application, 46 00:02:39,240 --> 00:02:40,770 ‫I want you to get familiar 47 00:02:40,770 --> 00:02:43,260 ‫with this small code base right here 48 00:02:43,260 --> 00:02:46,212 ‫and really understand how this application works 49 00:02:46,212 --> 00:02:48,240 ‫and what it does. 50 00:02:48,240 --> 00:02:50,310 ‫And then on top of that, 51 00:02:50,310 --> 00:02:54,990 ‫I want you to use our profiler tool here on your own 52 00:02:54,990 --> 00:02:59,340 ‫in order to identify a potential performance problem 53 00:02:59,340 --> 00:03:01,680 ‫that you can then fix. 54 00:03:01,680 --> 00:03:05,640 ‫So again, try to find a performance issue 55 00:03:05,640 --> 00:03:06,990 ‫in this application 56 00:03:06,990 --> 00:03:10,080 ‫according to what we learned in this section. 57 00:03:10,080 --> 00:03:11,850 ‫Now, this performance issue 58 00:03:11,850 --> 00:03:15,720 ‫is not really affecting this application visually, 59 00:03:15,720 --> 00:03:17,280 ‫but as an example 60 00:03:17,280 --> 00:03:19,470 ‫we can still fix that here 61 00:03:19,470 --> 00:03:21,480 ‫so that you can practice the tools 62 00:03:21,480 --> 00:03:23,700 ‫that we have learned in this section. 63 00:03:23,700 --> 00:03:25,606 ‫So in particular, the memo 64 00:03:25,606 --> 00:03:30,606 ‫usecallback and usememohooks now, right? 65 00:03:30,720 --> 00:03:32,760 ‫So take a few minutes now, 66 00:03:32,760 --> 00:03:34,770 ‫analyze the components that we have 67 00:03:34,770 --> 00:03:36,840 ‫and then try to find 68 00:03:36,840 --> 00:03:39,660 ‫and optimize that small problem. 69 00:03:39,660 --> 00:03:42,363 ‫And I see you back here once you're finished. 70 00:03:44,310 --> 00:03:48,540 ‫Okay, so did you find that small performance issue 71 00:03:48,540 --> 00:03:50,850 ‫that I was talking about? 72 00:03:50,850 --> 00:03:52,170 ‫Well, to show you 73 00:03:52,170 --> 00:03:56,160 ‫all we have to do is to just start profiling 74 00:03:56,160 --> 00:04:00,540 ‫then wait a few seconds without even clicking anywhere here 75 00:04:00,540 --> 00:04:03,030 ‫and then we just stop it. 76 00:04:03,030 --> 00:04:05,700 ‫And so what we see then immediately 77 00:04:05,700 --> 00:04:08,340 ‫is that we had eight renders 78 00:04:08,340 --> 00:04:10,020 ‫where in each of them 79 00:04:10,020 --> 00:04:12,333 ‫all of the components got re-rendered. 80 00:04:13,290 --> 00:04:18,000 ‫So for some reason the toggle is only appearing in this one, 81 00:04:18,000 --> 00:04:21,690 ‫but this component is also being re-rendered 82 00:04:21,690 --> 00:04:23,220 ‫every single time. 83 00:04:23,220 --> 00:04:26,400 ‫And so the reason for these eight re-renders 84 00:04:26,400 --> 00:04:28,800 ‫is as you might have noticed here, 85 00:04:28,800 --> 00:04:30,540 ‫that this small clock, 86 00:04:30,540 --> 00:04:35,310 ‫makes this app component re-render every single second. 87 00:04:35,310 --> 00:04:39,450 ‫So that is coming here from this useeffect. 88 00:04:39,450 --> 00:04:43,710 ‫So here we are setting a timer that runs once a second 89 00:04:43,710 --> 00:04:48,000 ‫and which sets the time state to the current time. 90 00:04:48,000 --> 00:04:50,659 ‫And so this means that this component 91 00:04:50,659 --> 00:04:54,900 ‫so the app component is re-rendered every single second. 92 00:04:54,900 --> 00:04:56,250 ‫And as a consequence 93 00:04:56,250 --> 00:05:00,690 ‫both its child components will be re-rendered as well. 94 00:05:00,690 --> 00:05:03,840 ‫So this was the issue that I wanted you to find 95 00:05:03,840 --> 00:05:05,520 ‫and then to fix. 96 00:05:05,520 --> 00:05:08,250 ‫And so let's now fix it. 97 00:05:08,250 --> 00:05:10,740 ‫And again, just note that 98 00:05:10,740 --> 00:05:12,660 ‫maybe in the real world application, 99 00:05:12,660 --> 00:05:15,300 ‫we would not have to fix this 100 00:05:15,300 --> 00:05:17,550 ‫unless one of these child components 101 00:05:17,550 --> 00:05:21,390 ‫are of course really slow and heavy components. 102 00:05:21,390 --> 00:05:24,390 ‫But anyway, here we are just learning. 103 00:05:24,390 --> 00:05:27,053 ‫So again, we want to practice those tools 104 00:05:27,053 --> 00:05:29,730 ‫and so let's now open up 105 00:05:29,730 --> 00:05:34,730 ‫the calculator and the toggle sounds components. 106 00:05:36,750 --> 00:05:41,750 ‫Alright, so what can we do about this performance issue? 107 00:05:42,750 --> 00:05:45,390 ‫Well, if it is some children components 108 00:05:45,390 --> 00:05:46,770 ‫that are re-rendering, 109 00:05:46,770 --> 00:05:49,800 ‫just because the parent component is re-rendering, 110 00:05:49,800 --> 00:05:53,864 ‫then the solution is to memorize those components. 111 00:05:53,864 --> 00:05:54,783 ‫Right? 112 00:05:55,890 --> 00:05:59,520 ‫Now remember how earlier we memorized a component 113 00:05:59,520 --> 00:06:02,373 ‫by basically creating a new variable here, 114 00:06:03,900 --> 00:06:05,370 ‫like toggle sounds 115 00:06:05,370 --> 00:06:09,960 ‫and then we would wrap this function into memo. 116 00:06:09,960 --> 00:06:11,220 ‫However since here, 117 00:06:11,220 --> 00:06:14,430 ‫we are actually exporting these components, 118 00:06:14,430 --> 00:06:19,263 ‫It's a lot easier and nicer to just memorize down here. 119 00:06:20,220 --> 00:06:22,293 ‫So let me show you what I mean by that. 120 00:06:23,370 --> 00:06:26,760 ‫So we can just export basically the results 121 00:06:26,760 --> 00:06:28,830 ‫of memorizing this component. 122 00:06:28,830 --> 00:06:32,190 ‫And so this again, is a lot better 123 00:06:32,190 --> 00:06:35,730 ‫than creating a new separate variable here 124 00:06:35,730 --> 00:06:38,253 ‫which makes the code look a little bit weird. 125 00:06:39,600 --> 00:06:43,173 ‫Okay, so let's do the same thing here. 126 00:06:44,250 --> 00:06:48,423 ‫So memo and there we go. 127 00:06:49,350 --> 00:06:52,890 ‫Now do you think, or did you even experience 128 00:06:52,890 --> 00:06:56,553 ‫during the challenge that this already fixes the problem? 129 00:06:57,480 --> 00:06:59,460 ‫Well, let's see. 130 00:06:59,460 --> 00:07:01,690 ‫So waiting again for a few seconds 131 00:07:03,240 --> 00:07:05,910 ‫and well, not really. 132 00:07:05,910 --> 00:07:10,320 ‫So the calculator is indeed still being re-rendered. 133 00:07:10,320 --> 00:07:13,530 ‫Let's see about the sound toggle. 134 00:07:13,530 --> 00:07:15,570 ‫So that one is never appearing. 135 00:07:15,570 --> 00:07:18,570 ‫And yeah, here in this flamegraph 136 00:07:18,570 --> 00:07:22,350 ‫we can see that this one is no longer re-rendering. 137 00:07:22,350 --> 00:07:26,133 ‫But again, the calculator component is always re-rendering. 138 00:07:27,000 --> 00:07:28,803 ‫So let's see what we can do. 139 00:07:29,730 --> 00:07:32,610 ‫So remember that the memo function only works 140 00:07:32,610 --> 00:07:35,160 ‫if the props that are being passed 141 00:07:35,160 --> 00:07:37,470 ‫are the same between renders. 142 00:07:37,470 --> 00:07:40,140 ‫So here in this toggle sounds component, 143 00:07:40,140 --> 00:07:42,360 ‫that is apparently the case. 144 00:07:42,360 --> 00:07:46,110 ‫So allowSound is just a primitive value 145 00:07:46,110 --> 00:07:47,730 ‫so it's just a boolean 146 00:07:47,730 --> 00:07:51,450 ‫and so therefore that doesn't change across renders. 147 00:07:51,450 --> 00:07:56,223 ‫And then the second prop is this setAllowSound function. 148 00:07:57,090 --> 00:08:00,210 ‫Now remember that the state setter function 149 00:08:00,210 --> 00:08:03,120 ‫from useState is actually stable. 150 00:08:03,120 --> 00:08:06,900 ‫So React guarantees that it doesn't change between renders. 151 00:08:06,900 --> 00:08:08,970 ‫And so this means 152 00:08:08,970 --> 00:08:12,390 ‫that these two props do not change between renders 153 00:08:12,390 --> 00:08:14,610 ‫and so therefore the toggle sounds component 154 00:08:14,610 --> 00:08:19,200 ‫does not re-render each time that the app re-renders. 155 00:08:19,200 --> 00:08:23,910 ‫So we successfully memoed or memorized this one. 156 00:08:23,910 --> 00:08:26,010 ‫Now about the calculator component. 157 00:08:26,010 --> 00:08:29,730 ‫The allowSounds of course also stays stable. 158 00:08:29,730 --> 00:08:33,790 ‫But now the other prop is the workouts object 159 00:08:34,650 --> 00:08:35,970 ‫or actually the array. 160 00:08:35,970 --> 00:08:38,880 ‫And so here is where we have the problem. 161 00:08:38,880 --> 00:08:40,860 ‫So since this is an array, 162 00:08:40,860 --> 00:08:44,160 ‫which is essentially just a JavaScript object 163 00:08:44,160 --> 00:08:48,180 ‫this array gets recreated on every single render. 164 00:08:48,180 --> 00:08:51,810 ‫And so therefore we now need to memorize this array 165 00:08:51,810 --> 00:08:55,563 ‫in order for the memorizing of the component to work. 166 00:08:57,540 --> 00:08:59,760 ‫So let's do that. 167 00:08:59,760 --> 00:09:01,290 ‫And it is useMemo, 168 00:09:01,290 --> 00:09:05,463 ‫because it's just a value and not a callback function. 169 00:09:07,020 --> 00:09:10,210 ‫So let's wrap that into useMemo. 170 00:09:11,310 --> 00:09:15,690 ‫And remember how here we need to pass in a function 171 00:09:15,690 --> 00:09:18,573 ‫which React will then call on the initial render. 172 00:09:19,980 --> 00:09:23,160 ‫And here, due to the nature of array functions 173 00:09:23,160 --> 00:09:24,240 ‫in JavaScript, 174 00:09:24,240 --> 00:09:29,130 ‫we actually need to create a function body 175 00:09:29,130 --> 00:09:31,533 ‫and then return this array from there. 176 00:09:32,910 --> 00:09:34,950 ‫So close that here, 177 00:09:34,950 --> 00:09:38,040 ‫but then we are missing the dependency array. 178 00:09:38,040 --> 00:09:42,540 ‫Okay, well apparently there's some other problem here. 179 00:09:42,540 --> 00:09:46,470 ‫Ah, like this. now, right? 180 00:09:46,470 --> 00:09:47,880 ‫Give it a safe. 181 00:09:47,880 --> 00:09:50,100 ‫And now here we already got the warning 182 00:09:50,100 --> 00:09:52,050 ‫but we don't want to read the warning. 183 00:09:52,050 --> 00:09:53,910 ‫So after the last lecture, 184 00:09:53,910 --> 00:09:56,250 ‫we want to actually now understand 185 00:09:56,250 --> 00:09:59,253 ‫what is missing here in this dependency array. 186 00:10:00,180 --> 00:10:02,280 ‫So remember how we just learned 187 00:10:02,280 --> 00:10:04,920 ‫that the dependency array needs to include 188 00:10:04,920 --> 00:10:09,390 ‫all reactive values that are used inside the function. 189 00:10:09,390 --> 00:10:11,070 ‫So inside the hook, 190 00:10:11,070 --> 00:10:14,460 ‫and we talked about useEffect in the previous lecture 191 00:10:14,460 --> 00:10:18,453 ‫but the same thing applies to useCallback and useMemo. 192 00:10:19,860 --> 00:10:23,370 ‫So our reactive values in this component 193 00:10:23,370 --> 00:10:25,698 ‫are of course these two state variables, 194 00:10:25,698 --> 00:10:29,490 ‫but also this partOfDay variable 195 00:10:29,490 --> 00:10:32,820 ‫because it depends on the time state. 196 00:10:32,820 --> 00:10:35,100 ‫So it is using a reactive value 197 00:10:35,100 --> 00:10:38,310 ‫and therefore this is also a reactive value. 198 00:10:38,310 --> 00:10:42,360 ‫And since we are using that value inside this array, 199 00:10:42,360 --> 00:10:44,820 ‫this means that we now need to include it 200 00:10:44,820 --> 00:10:46,563 ‫into the dependency array. 201 00:10:47,640 --> 00:10:48,473 ‫So partOfDay, 202 00:10:49,560 --> 00:10:54,560 ‫and now eselent is no longer complaining, all right? 203 00:10:55,440 --> 00:10:58,413 ‫And so this should actually fix it. 204 00:11:00,030 --> 00:11:01,623 ‫So let's try that again. 205 00:11:03,840 --> 00:11:06,483 ‫That should be enough and nice. 206 00:11:07,500 --> 00:11:12,500 ‫So now our calculator is also memorized, so that works 207 00:11:12,930 --> 00:11:17,930 ‫and yeah, that was basically the goal of this lecture. 208 00:11:18,120 --> 00:11:21,060 ‫Now there's just another small thing that we can do 209 00:11:21,060 --> 00:11:24,300 ‫which is about this function here. 210 00:11:24,300 --> 00:11:27,270 ‫So this function that is inside 211 00:11:27,270 --> 00:11:29,250 ‫the component body right here, 212 00:11:29,250 --> 00:11:33,150 ‫doesn't actually use any reactive value, right? 213 00:11:33,150 --> 00:11:36,030 ‫And so there's no need to recreate this function 214 00:11:36,030 --> 00:11:37,530 ‫on every render. 215 00:11:37,530 --> 00:11:42,213 ‫And so let's cut that and place it out here. 216 00:11:43,080 --> 00:11:45,960 ‫So another very small optimization 217 00:11:45,960 --> 00:11:49,490 ‫but yeah, we don't need to waste any resources 218 00:11:49,490 --> 00:11:54,300 ‫only to recreate this function when we don't need to to. 219 00:11:54,300 --> 00:11:57,870 ‫And with this, we actually wrap up this video. 220 00:11:57,870 --> 00:11:58,920 ‫And so next up 221 00:11:58,920 --> 00:12:02,850 ‫we will start working a bit on changing this application. 222 00:12:02,850 --> 00:12:06,090 ‫So it's already working just fine for the most part 223 00:12:06,090 --> 00:12:09,780 ‫but for example these buttons here don't do anything. 224 00:12:09,780 --> 00:12:12,063 ‫And so that's what we're gonna change next.