1 00:00:01,140 --> 00:00:03,960 ‫Let's now check out a practical example 2 00:00:03,960 --> 00:00:06,543 ‫of memorizing a component. 3 00:00:08,190 --> 00:00:12,420 ‫So here we are still in the Atomic Block project, 4 00:00:12,420 --> 00:00:15,750 ‫but for these next few lectures, we actually need 5 00:00:15,750 --> 00:00:19,893 ‫the original app.js file from the starter files. 6 00:00:21,240 --> 00:00:23,013 ‫So let's move there. 7 00:00:26,700 --> 00:00:31,170 ‫So grabbing again app.js 8 00:00:31,170 --> 00:00:35,040 ‫and let's paste it right here in the project folder 9 00:00:35,040 --> 00:00:39,780 ‫and then I'm gonna rename it to app-Memo 10 00:00:39,780 --> 00:00:44,133 ‫and then let's place it into the source folder. 11 00:00:45,780 --> 00:00:50,010 ‫Now, okay, so let's open that one up here 12 00:00:50,010 --> 00:00:55,010 ‫and then also in index.js, we now need to link that file. 13 00:00:55,560 --> 00:01:00,560 ‫So we now want to import the app from app-memo 14 00:01:00,660 --> 00:01:04,680 ‫and we need this component right here, 15 00:01:04,680 --> 00:01:06,060 ‫so the original one 16 00:01:06,060 --> 00:01:09,060 ‫because here we don't have any context yet 17 00:01:09,060 --> 00:01:12,090 ‫and instead we are passing some props around, 18 00:01:12,090 --> 00:01:15,453 ‫which is what we need for these next few lectures. 19 00:01:16,380 --> 00:01:20,230 ‫Now here in the archive, let's actually remove this prop 20 00:01:21,210 --> 00:01:26,210 ‫and let's just add one here called show and set it to true. 21 00:01:28,320 --> 00:01:31,320 ‫And then let's come down here to the archive 22 00:01:31,320 --> 00:01:32,970 ‫and accept that. 23 00:01:32,970 --> 00:01:35,850 ‫So in this lecture we will actually work 24 00:01:35,850 --> 00:01:38,283 ‫with this archive component. 25 00:01:39,540 --> 00:01:43,080 ‫Then here, let's make this show archive 26 00:01:43,080 --> 00:01:45,720 ‫dependent on this show prop. 27 00:01:45,720 --> 00:01:50,640 ‫And then we need to remove this button right here. 28 00:01:50,640 --> 00:01:54,150 ‫So this button was using the onAddPost function 29 00:01:54,150 --> 00:01:56,700 ‫that we passed in as a prop earlier, 30 00:01:56,700 --> 00:01:58,953 ‫but now we no longer have that prop. 31 00:02:00,000 --> 00:02:03,180 ‫Now, right, now we never really looked 32 00:02:03,180 --> 00:02:05,490 ‫at this component here in the beginning, 33 00:02:05,490 --> 00:02:08,820 ‫so let's just quickly understand what it does. 34 00:02:08,820 --> 00:02:12,420 ‫So basically it creates these 10,000 random posts 35 00:02:12,420 --> 00:02:16,473 ‫in the very beginning and stores them into the post state. 36 00:02:17,550 --> 00:02:20,400 ‫Now by default, all these 10,000 posts 37 00:02:20,400 --> 00:02:22,380 ‫are not actually shown 38 00:02:22,380 --> 00:02:26,880 ‫because we have the show archive state set to false. 39 00:02:26,880 --> 00:02:30,393 ‫At least that's what the incoming prop is. 40 00:02:33,120 --> 00:02:35,253 ‫Now here, for some reason, it is open. 41 00:02:36,120 --> 00:02:37,353 ‫Let's just reload that. 42 00:02:38,370 --> 00:02:43,370 ‫And well, maybe I set it to true up there. 43 00:02:44,640 --> 00:02:47,610 ‫Ah, yeah, here I want false actually, 44 00:02:47,610 --> 00:02:52,610 ‫so that by default that huge list of posts is not rendered. 45 00:02:55,950 --> 00:02:57,990 ‫So here we have some conditional rendering 46 00:02:57,990 --> 00:03:02,350 ‫based on that state, but as soon as I click here, 47 00:03:02,350 --> 00:03:06,633 ‫it'll actually open this list of posts. 48 00:03:07,650 --> 00:03:10,890 ‫Now let me actually increase the number here a bit 49 00:03:10,890 --> 00:03:15,240 ‫to 30,000, but if your computer is maybe a bit slower, 50 00:03:15,240 --> 00:03:18,510 ‫then you can leave it or maybe even reduce it. 51 00:03:18,510 --> 00:03:22,863 ‫So otherwise your computer or your browser might crash. 52 00:03:25,020 --> 00:03:29,370 ‫So let's see again that when I click on this button here, 53 00:03:29,370 --> 00:03:31,170 ‫it actually takes a long time 54 00:03:31,170 --> 00:03:32,883 ‫for the entire thing to render. 55 00:03:34,290 --> 00:03:37,950 ‫So that's probably like almost a second tier. 56 00:03:37,950 --> 00:03:41,940 ‫Now the problem is not that it takes a long time to render 57 00:03:41,940 --> 00:03:46,020 ‫this list here because that's just completely unavoidable. 58 00:03:46,020 --> 00:03:49,980 ‫So it's so many items that of course it'll take some time. 59 00:03:49,980 --> 00:03:54,720 ‫Now the problem is that this will slow down the entire page. 60 00:03:54,720 --> 00:03:58,080 ‫So what happens when I type something here 61 00:03:58,080 --> 00:03:59,253 ‫into the search bar? 62 00:04:01,290 --> 00:04:04,200 ‫So notice how this created a big lag. 63 00:04:04,200 --> 00:04:05,490 ‫So let's show again. 64 00:04:05,490 --> 00:04:08,880 ‫So as I type, it takes like half a second 65 00:04:08,880 --> 00:04:12,000 ‫until that letter actually appears there 66 00:04:12,000 --> 00:04:15,843 ‫and so let's now also inspect this using the profiler. 67 00:04:16,800 --> 00:04:19,680 ‫So let me actually reload again 68 00:04:19,680 --> 00:04:21,483 ‫so that the archive is closed. 69 00:04:22,890 --> 00:04:26,340 ‫And so then we will do a before and after. 70 00:04:26,340 --> 00:04:27,873 ‫So we are now profiling. 71 00:04:28,890 --> 00:04:31,653 ‫So now I type and it is really fast. 72 00:04:32,490 --> 00:04:35,340 ‫But now let's open the archive, 73 00:04:35,340 --> 00:04:40,340 ‫so we have a second render here or re-render 74 00:04:40,800 --> 00:04:44,010 ‫and then let's type something here 75 00:04:44,010 --> 00:04:46,410 ‫and now it is really slow 76 00:04:46,410 --> 00:04:50,550 ‫but just watch how slow that actually is. 77 00:04:50,550 --> 00:04:54,390 ‫So here again we have the three re-renders that happened 78 00:04:54,390 --> 00:04:56,130 ‫and by the size of the bars, 79 00:04:56,130 --> 00:04:59,280 ‫we can already see that this last one, 80 00:04:59,280 --> 00:05:02,103 ‫so the second letter was really slow. 81 00:05:03,030 --> 00:05:08,030 ‫So hit a first keystroke for the H right there 82 00:05:08,580 --> 00:05:09,930 ‫was just normal. 83 00:05:09,930 --> 00:05:12,780 ‫So everything took like one millisecond 84 00:05:12,780 --> 00:05:14,790 ‫or three milliseconds. 85 00:05:14,790 --> 00:05:17,280 ‫So something really, really fast. 86 00:05:17,280 --> 00:05:21,630 ‫But then watch how long it took to render the archive. 87 00:05:21,630 --> 00:05:24,870 ‫So it took 131 milliseconds 88 00:05:24,870 --> 00:05:27,060 ‫and that's just the rendering itself. 89 00:05:27,060 --> 00:05:30,210 ‫So just calling the function, then painting the whole thing 90 00:05:30,210 --> 00:05:32,730 ‫to the dom took even longer than that. 91 00:05:32,730 --> 00:05:35,073 ‫So probably like one entire second. 92 00:05:36,060 --> 00:05:39,270 ‫But anyway, what matters to us is here, 93 00:05:39,270 --> 00:05:43,770 ‫this second keystroke, so when I wrote the A there. 94 00:05:43,770 --> 00:05:46,920 ‫So notice here how the archive re-rendered 95 00:05:46,920 --> 00:05:49,680 ‫when I typed something here 96 00:05:49,680 --> 00:05:53,070 ‫and so the reason for that is of course that the archive 97 00:05:53,070 --> 00:05:56,310 ‫is a child component of the app component, 98 00:05:56,310 --> 00:05:59,340 ‫which is where that state actually lives. 99 00:05:59,340 --> 00:06:02,370 ‫And so if we update the state in the app component, 100 00:06:02,370 --> 00:06:04,620 ‫that will then, as we already know, 101 00:06:04,620 --> 00:06:07,800 ‫trigger a re-render in all the child components 102 00:06:07,800 --> 00:06:10,740 ‫and so that includes the archive 103 00:06:10,740 --> 00:06:13,170 ‫and notice how it took even so long 104 00:06:13,170 --> 00:06:16,530 ‫that all the other components don't even have space 105 00:06:16,530 --> 00:06:19,350 ‫to appear here in this flame graph. 106 00:06:19,350 --> 00:06:22,050 ‫But if we take a look at the ranked chart, 107 00:06:22,050 --> 00:06:24,540 ‫then we see all the other components. 108 00:06:24,540 --> 00:06:28,140 ‫And so here again, we can see how fast all of them are 109 00:06:28,140 --> 00:06:30,423 ‫in comparison to the archive. 110 00:06:31,680 --> 00:06:35,700 ‫All right, and so again, this is the real problem 111 00:06:35,700 --> 00:06:39,270 ‫that we have, which is the typing here now makes 112 00:06:39,270 --> 00:06:42,300 ‫the entire application really, really slow 113 00:06:42,300 --> 00:06:44,760 ‫because it always needs to re-render 114 00:06:44,760 --> 00:06:46,890 ‫this really slow component 115 00:06:46,890 --> 00:06:50,640 ‫and so this archive component is a perfect candidate 116 00:06:50,640 --> 00:06:52,233 ‫for memorization. 117 00:06:53,580 --> 00:06:56,073 ‫So let's do this now here in practice. 118 00:06:57,900 --> 00:07:00,780 ‫So the way we do that is to just wrap 119 00:07:00,780 --> 00:07:05,780 ‫the entire component function into Reacts memo function. 120 00:07:06,060 --> 00:07:09,180 ‫So we just call memo, which is then imported 121 00:07:09,180 --> 00:07:13,383 ‫from React just like use state or use effect. 122 00:07:14,820 --> 00:07:19,440 ‫So notice here that it simply imports memo from React. 123 00:07:19,440 --> 00:07:22,800 ‫So it's just another function that comes with React 124 00:07:22,800 --> 00:07:26,913 ‫and then we just wrap everything into that function call. 125 00:07:28,020 --> 00:07:32,190 ‫So basically we call memo with a component as an argument 126 00:07:32,190 --> 00:07:36,057 ‫and then this function will return a brand new component 127 00:07:36,057 --> 00:07:40,470 ‫and so then we need to store that component also somewhere 128 00:07:40,470 --> 00:07:45,300 ‫and so we create a variable which we call again, archive. 129 00:07:45,300 --> 00:07:49,920 ‫And so now our archive component is all of this here. 130 00:07:49,920 --> 00:07:53,880 ‫So the memorized version of the original archive 131 00:07:53,880 --> 00:07:57,420 ‫and here we could probably even remove the duplicate name 132 00:07:57,420 --> 00:07:59,820 ‫and make this an anonymous function 133 00:07:59,820 --> 00:08:02,910 ‫but I guess it's best like this. 134 00:08:02,910 --> 00:08:05,700 ‫So just leave the name here as well 135 00:08:05,700 --> 00:08:09,750 ‫and yeah, with this we have actually successfully memorized 136 00:08:09,750 --> 00:08:13,230 ‫the archive component and remember that this was 137 00:08:13,230 --> 00:08:15,930 ‫a great candidate for memorization 138 00:08:15,930 --> 00:08:19,470 ‫because the archive component is very heavy. 139 00:08:19,470 --> 00:08:24,330 ‫It re-renders very often and it does so with the same props. 140 00:08:24,330 --> 00:08:27,210 ‫So the only prop that it has is the show prop, 141 00:08:27,210 --> 00:08:29,010 ‫which is always false 142 00:08:29,010 --> 00:08:33,120 ‫and so, yeah, again, this is a great candidate 143 00:08:33,120 --> 00:08:36,000 ‫and so let's now do exactly the same profiling 144 00:08:36,000 --> 00:08:38,580 ‫that we did before in order to show 145 00:08:38,580 --> 00:08:40,803 ‫if it improved our situation. 146 00:08:41,700 --> 00:08:43,323 ‫So let's start here. 147 00:08:45,810 --> 00:08:50,160 ‫So that was fast because the archive is still closed. 148 00:08:50,160 --> 00:08:51,750 ‫Let's open that up 149 00:08:51,750 --> 00:08:55,650 ‫and this of course takes exactly the same time as before, 150 00:08:55,650 --> 00:08:58,560 ‫which makes sense because as we just learned, 151 00:08:58,560 --> 00:09:01,260 ‫memorizing a component has nothing to do 152 00:09:01,260 --> 00:09:03,390 ‫with updating state. 153 00:09:03,390 --> 00:09:05,913 ‫So memorizing only affects the props. 154 00:09:07,890 --> 00:09:09,900 ‫So that list still has to be rendered 155 00:09:09,900 --> 00:09:11,910 ‫and so that still takes time 156 00:09:11,910 --> 00:09:14,850 ‫but what should have changed is the time that it takes 157 00:09:14,850 --> 00:09:18,390 ‫to now re-render as we type something else here. 158 00:09:18,390 --> 00:09:21,870 ‫So let's try that and we can immediately see 159 00:09:21,870 --> 00:09:24,210 ‫that this was really fast 160 00:09:24,210 --> 00:09:27,450 ‫and now our profiler should prove that, 161 00:09:27,450 --> 00:09:31,080 ‫and indeed, now here in the second time 162 00:09:31,080 --> 00:09:34,413 ‫that we typed something, it is really fast again. 163 00:09:35,490 --> 00:09:39,240 ‫So here even the first time that there was a keystroke, 164 00:09:39,240 --> 00:09:43,140 ‫we can see that the archive did not render. 165 00:09:43,140 --> 00:09:46,350 ‫So here it is showing us that this component 166 00:09:46,350 --> 00:09:50,760 ‫is memorized even and so again, it did not render, 167 00:09:50,760 --> 00:09:53,790 ‫which is because the prop that it received 168 00:09:53,790 --> 00:09:56,400 ‫was still the same as before. 169 00:09:56,400 --> 00:10:01,020 ‫So the prop that it received is show, which is always true. 170 00:10:01,020 --> 00:10:04,680 ‫And so then this component didn't have to re-render 171 00:10:04,680 --> 00:10:06,363 ‫as the parent re-rendered. 172 00:10:07,200 --> 00:10:10,890 ‫And again, here the same thing when the component 173 00:10:10,890 --> 00:10:12,510 ‫was already opened. 174 00:10:12,510 --> 00:10:15,960 ‫And so with this, so with the simple memorization 175 00:10:15,960 --> 00:10:19,920 ‫just made our component really fast and snappy again. 176 00:10:19,920 --> 00:10:24,690 ‫So we can type all we want, even with that archive open 177 00:10:24,690 --> 00:10:28,020 ‫because it will not re-render on every keystroke 178 00:10:28,020 --> 00:10:32,340 ‫or also here each time that we click on this button 179 00:10:32,340 --> 00:10:36,540 ‫for example, which before would also be really slow 180 00:10:36,540 --> 00:10:40,443 ‫because clicking here also renders the app component. 181 00:10:41,460 --> 00:10:46,460 ‫Great, so this is why and how we memorize a component 182 00:10:46,560 --> 00:10:47,403 ‫in React. 183 00:10:49,260 --> 00:10:54,180 ‫But now let's do something that will break this memorization 184 00:10:54,180 --> 00:10:57,420 ‫so that I can then introduce the next lecture 185 00:10:57,420 --> 00:11:01,200 ‫so that we can then solve that problem in the future. 186 00:11:01,200 --> 00:11:05,130 ‫So let's say that now instead of passing in this prop 187 00:11:05,130 --> 00:11:08,973 ‫right here, I instead want to pass in an object. 188 00:11:10,800 --> 00:11:15,800 ‫So let's create an object here called archive options 189 00:11:18,360 --> 00:11:23,133 ‫and then let's say show is false. 190 00:11:24,900 --> 00:11:25,923 ‫And a title. 191 00:11:27,720 --> 00:11:32,720 ‫Let's say post archive in addition to main posts. 192 00:11:39,120 --> 00:11:42,150 ‫And now here instead of the show prop, 193 00:11:42,150 --> 00:11:45,120 ‫I'm gonna pass in that object. 194 00:11:45,120 --> 00:11:46,803 ‫So archive options. 195 00:11:48,120 --> 00:11:51,180 ‫Set it to archive options. 196 00:11:51,180 --> 00:11:55,263 ‫And now let's get that here. 197 00:11:57,330 --> 00:12:00,357 ‫And now here we use archiveoptions.show 198 00:12:05,520 --> 00:12:06,620 ‫and here... 199 00:12:10,800 --> 00:12:15,393 ‫We use archiveoptions.title. 200 00:12:16,329 --> 00:12:20,160 ‫Give it a save, then let's reel out here 201 00:12:20,160 --> 00:12:23,973 ‫and then let's run exactly the same experiment as before. 202 00:12:24,930 --> 00:12:26,823 ‫So just typing something here. 203 00:12:28,620 --> 00:12:31,920 ‫Then opening here the archive, 204 00:12:31,920 --> 00:12:34,500 ‫which is always take some time. 205 00:12:34,500 --> 00:12:37,350 ‫And now as I type notice how it'll be back 206 00:12:37,350 --> 00:12:38,703 ‫to taking a long time. 207 00:12:39,840 --> 00:12:41,790 ‫So you saw that. 208 00:12:41,790 --> 00:12:45,990 ‫And indeed, we are now back to basically re-rendering 209 00:12:45,990 --> 00:12:48,930 ‫this component even though it is memorized 210 00:12:48,930 --> 00:12:53,703 ‫and even though it looks as though our prop hasn't changed. 211 00:12:54,630 --> 00:12:56,880 ‫So the archive options that we received 212 00:12:56,880 --> 00:12:59,343 ‫still looks the same as before. 213 00:13:01,830 --> 00:13:04,260 ‫It's just this object right here. 214 00:13:04,260 --> 00:13:08,910 ‫But still now our archive component was re-rendered again. 215 00:13:08,910 --> 00:13:11,460 ‫So let's now find out why this is 216 00:13:11,460 --> 00:13:14,103 ‫and how we can fix that in the next lecture.