1 00:00:01,140 --> 00:00:04,320 ‫Let's now take a look at a few strategies 2 00:00:04,320 --> 00:00:05,520 ‫that we can use 3 00:00:05,520 --> 00:00:09,568 ‫in order to prevent wasted renders related 4 00:00:09,568 --> 00:00:10,518 ‫to the context API. 5 00:00:11,880 --> 00:00:16,880 ‫And for that, let's actually come back to our APP.js 6 00:00:17,400 --> 00:00:21,003 ‫which is the one where we already use our context. 7 00:00:22,320 --> 00:00:26,790 ‫So, notice how here we don't pass around any props anymore 8 00:00:26,790 --> 00:00:31,683 ‫and we use our custom hook that is coming from our context. 9 00:00:34,110 --> 00:00:35,730 ‫So, we no longer need this. 10 00:00:35,730 --> 00:00:37,770 ‫We also need this file, of course. 11 00:00:37,770 --> 00:00:39,330 ‫And now in the index 12 00:00:39,330 --> 00:00:43,143 ‫let's go back to importing app from the app file. 13 00:00:46,260 --> 00:00:50,310 ‫Okay, and now let's see what we can do here 14 00:00:50,310 --> 00:00:52,800 ‫to optimize this a little bit. 15 00:00:52,800 --> 00:00:54,900 ‫But before we go do that 16 00:00:54,900 --> 00:00:57,540 ‫it's actually very important to understand 17 00:00:57,540 --> 00:01:00,420 ‫that you only need to optimize your context 18 00:01:00,420 --> 00:01:04,770 ‫in case that three things are true at the same time. 19 00:01:04,770 --> 00:01:06,480 ‫So first of all, the state 20 00:01:06,480 --> 00:01:09,780 ‫in the context needs to change all the time. 21 00:01:09,780 --> 00:01:13,080 ‫Second, the context has many consumers 22 00:01:13,080 --> 00:01:16,470 ‫and third, and probably most importantly 23 00:01:16,470 --> 00:01:20,100 ‫the app is actually slow and laggy. 24 00:01:20,100 --> 00:01:22,890 ‫So only if all of these are true 25 00:01:22,890 --> 00:01:26,160 ‫it is time to optimize context. 26 00:01:26,160 --> 00:01:29,580 ‫Now, the actual optimization of your context 27 00:01:29,580 --> 00:01:31,410 ‫can be quite confusing 28 00:01:31,410 --> 00:01:33,840 ‫because it's gonna depend a lot 29 00:01:33,840 --> 00:01:35,940 ‫on how you build your application 30 00:01:35,940 --> 00:01:38,310 ‫and how you set up your context 31 00:01:38,310 --> 00:01:42,330 ‫and also, what exactly you pass into the context. 32 00:01:42,330 --> 00:01:45,690 ‫And so, I cannot give you a clear recipe here 33 00:01:45,690 --> 00:01:50,430 ‫but I will just try to show you a few different things here. 34 00:01:50,430 --> 00:01:51,870 ‫So first of all 35 00:01:51,870 --> 00:01:55,440 ‫remember that we are already doing that optimization 36 00:01:55,440 --> 00:01:59,280 ‫where we pass the children into the component. 37 00:01:59,280 --> 00:02:02,250 ‫So what we render here, are simply the children 38 00:02:02,250 --> 00:02:03,333 ‫that we pass in. 39 00:02:04,200 --> 00:02:07,650 ‫So, these components right here. 40 00:02:07,650 --> 00:02:09,570 ‫And so, remember from earlier 41 00:02:09,570 --> 00:02:11,040 ‫that this makes it so 42 00:02:11,040 --> 00:02:15,150 ‫that these children are not all automatically re-rendered 43 00:02:15,150 --> 00:02:17,520 ‫because they were already created 44 00:02:17,520 --> 00:02:19,650 ‫before they were actually passed 45 00:02:19,650 --> 00:02:21,843 ‫into this provider component. 46 00:02:22,920 --> 00:02:26,640 ‫So let's just see that in action here, once again. 47 00:02:26,640 --> 00:02:28,060 ‫So as a record now 48 00:02:29,700 --> 00:02:31,590 ‫let's type something. 49 00:02:31,590 --> 00:02:35,370 ‫Let's stop, and so, here we see again 50 00:02:35,370 --> 00:02:39,300 ‫that these two components and also with the footer 51 00:02:39,300 --> 00:02:41,410 ‫are not automatically re-rendered. 52 00:02:41,410 --> 00:02:46,380 ‫And so, this alone is already a good optimization technique. 53 00:02:46,380 --> 00:02:51,380 ‫So, if we just had, basically this right here 54 00:02:52,950 --> 00:02:55,290 ‫here in the APP.js. 55 00:02:55,290 --> 00:02:58,113 ‫So basically what we did earlier in V1. 56 00:02:59,550 --> 00:03:00,383 ‫So 57 00:03:01,440 --> 00:03:02,273 ‫let's see 58 00:03:04,005 --> 00:03:07,440 ‫yeah, so remember how earlier this is what we had. 59 00:03:07,440 --> 00:03:10,890 ‫So we had these children here directly inside 60 00:03:10,890 --> 00:03:12,660 ‫the post context provider 61 00:03:12,660 --> 00:03:14,580 ‫and then all of these children right here 62 00:03:14,580 --> 00:03:17,460 ‫would also automatically have been re-rendered 63 00:03:17,460 --> 00:03:21,843 ‫as we changed the state inside that context. 64 00:03:23,370 --> 00:03:26,670 ‫So we already have that optimization going on 65 00:03:26,670 --> 00:03:29,340 ‫but if for some reason you are not doing that 66 00:03:29,340 --> 00:03:32,550 ‫then you should memo all of the direct children 67 00:03:32,550 --> 00:03:34,140 ‫of that context. 68 00:03:34,140 --> 00:03:36,540 ‫So basically what we did earlier 69 00:03:36,540 --> 00:03:39,630 ‫which is to wrap this component 70 00:03:39,630 --> 00:03:44,190 ‫and the main and the footer all into a memo. 71 00:03:44,190 --> 00:03:46,140 ‫So memorizing those components 72 00:03:46,140 --> 00:03:48,930 ‫so that they don't automatically re-render 73 00:03:48,930 --> 00:03:51,483 ‫once we update the state in the context. 74 00:03:52,920 --> 00:03:53,753 ‫Okay? 75 00:03:54,810 --> 00:03:58,440 ‫So that's one of the guidelines that I can give you. 76 00:03:58,440 --> 00:04:01,740 ‫So doing either this technique with the children 77 00:04:01,740 --> 00:04:06,360 ‫or to memorize the direct descendants of the context. 78 00:04:06,360 --> 00:04:09,540 ‫Now next up, let's try to see what happens 79 00:04:09,540 --> 00:04:12,180 ‫when we update the state in the application 80 00:04:12,180 --> 00:04:14,760 ‫above our provider. 81 00:04:14,760 --> 00:04:16,770 ‫So for example, this one right here. 82 00:04:16,770 --> 00:04:19,110 ‫So this state lives in the app 83 00:04:19,110 --> 00:04:22,470 ‫but since this post provider is a children of that 84 00:04:22,470 --> 00:04:25,200 ‫it'll then also automatically re-render. 85 00:04:25,200 --> 00:04:27,690 ‫And so, let's see what happens then. 86 00:04:27,690 --> 00:04:32,690 ‫And for that, let's also turn on again this setting here. 87 00:04:33,630 --> 00:04:36,873 ‫So recording why each component rendered. 88 00:04:37,890 --> 00:04:39,573 ‫Then let's clean this. 89 00:04:41,670 --> 00:04:42,930 ‫Let's clean this, as well 90 00:04:42,930 --> 00:04:45,900 ‫and then let's just start recording. 91 00:04:45,900 --> 00:04:49,320 ‫And now what I'm gonna do again is to change the state 92 00:04:49,320 --> 00:04:53,703 ‫in a component that is above or custom provider component. 93 00:04:56,017 --> 00:04:58,083 ‫So let's see what happens. 94 00:04:59,130 --> 00:05:02,880 ‫And indeed, now all the components did re-render 95 00:05:02,880 --> 00:05:05,670 ‫however, they did re-render for a different reason 96 00:05:05,670 --> 00:05:07,500 ‫that we might think. 97 00:05:07,500 --> 00:05:10,080 ‫So of course, app itself was re-rendered 98 00:05:10,080 --> 00:05:11,880 ‫because the state changed 99 00:05:11,880 --> 00:05:15,330 ‫but then for example, this one here 100 00:05:15,330 --> 00:05:19,350 ‫so the main was re-rendered because the parent re-rendered. 101 00:05:19,350 --> 00:05:22,560 ‫So that makes a lot of sense, right? 102 00:05:22,560 --> 00:05:23,640 ‫The same here. 103 00:05:23,640 --> 00:05:26,430 ‫And then we would expect the same to also happen 104 00:05:26,430 --> 00:05:27,780 ‫in the list. 105 00:05:27,780 --> 00:05:30,480 ‫However, the list did actually re-render 106 00:05:30,480 --> 00:05:33,180 ‫because the context changed. 107 00:05:33,180 --> 00:05:35,310 ‫Well, that's strange, right? 108 00:05:35,310 --> 00:05:39,480 ‫Because this state right here with the dark mode 109 00:05:39,480 --> 00:05:42,630 ‫actually has nothing to do with context. 110 00:05:42,630 --> 00:05:46,080 ‫But still all the components that consume the context 111 00:05:46,080 --> 00:05:49,380 ‫did now re-render because of context. 112 00:05:49,380 --> 00:05:50,530 ‫So the same thing here 113 00:05:51,986 --> 00:05:54,300 ‫and the same thing in the archive, as well. 114 00:05:54,300 --> 00:05:57,120 ‫And just keep in mind that we are now working 115 00:05:57,120 --> 00:06:00,070 ‫with a different app where we no longer 116 00:06:01,470 --> 00:06:04,800 ‫have the archive memorized, remember? 117 00:06:04,800 --> 00:06:07,800 ‫So we memorized the archive earlier 118 00:06:07,800 --> 00:06:11,193 ‫but now we are back in the other APP.js file. 119 00:06:12,090 --> 00:06:13,770 ‫But anyway, we would've thought 120 00:06:13,770 --> 00:06:15,930 ‫that all of these components re-rendered 121 00:06:15,930 --> 00:06:18,240 ‫because their parent re-rendered 122 00:06:18,240 --> 00:06:22,410 ‫which is what makes sense for these two, for example 123 00:06:22,410 --> 00:06:24,423 ‫not because context changed. 124 00:06:25,410 --> 00:06:28,380 ‫So why does that appear here? 125 00:06:28,380 --> 00:06:30,300 ‫Well, the reason is that 126 00:06:30,300 --> 00:06:34,263 ‫this value right here is an object, right? 127 00:06:35,464 --> 00:06:37,890 ‫And this post provider is a child element 128 00:06:37,890 --> 00:06:39,540 ‫of the app component. 129 00:06:39,540 --> 00:06:42,510 ‫And so therefore, when the app component re-renders 130 00:06:42,510 --> 00:06:45,660 ‫then this post provider re-renders, as well 131 00:06:45,660 --> 00:06:49,260 ‫and therefore, this object will be recreated. 132 00:06:49,260 --> 00:06:52,260 ‫And so, if this object will be recreated 133 00:06:52,260 --> 00:06:54,840 ‫it means that the context value has changed 134 00:06:54,840 --> 00:06:58,560 ‫and therefore, all the components that consume that context 135 00:06:58,560 --> 00:07:00,363 ‫are going to be re-rendered. 136 00:07:02,040 --> 00:07:05,280 ‫All right, so that's the reason why here we see 137 00:07:05,280 --> 00:07:07,020 ‫that the context has changed 138 00:07:07,020 --> 00:07:11,280 ‫because actually it did change because this value here 139 00:07:11,280 --> 00:07:13,833 ‫so this object did update. 140 00:07:15,030 --> 00:07:20,030 ‫So, the solution for that is to memorize this object. 141 00:07:20,520 --> 00:07:22,383 ‫So let's create that out here. 142 00:07:25,080 --> 00:07:27,240 ‫So let's do value 143 00:07:27,240 --> 00:07:31,650 ‫and then use memo as we have learned earlier. 144 00:07:31,650 --> 00:07:33,850 ‫And then here we need our callback function. 145 00:07:35,250 --> 00:07:37,420 ‫And so, this is then going to return 146 00:07:38,460 --> 00:07:40,953 ‫this exact object right here. 147 00:07:43,320 --> 00:07:47,876 ‫Place that here, use the value here 148 00:07:47,876 --> 00:07:50,760 ‫and then our dependency array. 149 00:07:50,760 --> 00:07:52,950 ‫Now, as we save this, you will notice 150 00:07:52,950 --> 00:07:56,340 ‫that this will create a few additional problems. 151 00:07:56,340 --> 00:07:58,020 ‫So let's see. 152 00:07:58,020 --> 00:08:01,320 ‫And so indeed, we are now missing the search Query 153 00:08:01,320 --> 00:08:03,750 ‫and the searched posts 154 00:08:03,750 --> 00:08:06,870 ‫so basically, these outside variables 155 00:08:06,870 --> 00:08:09,780 ‫that we are using in here. 156 00:08:09,780 --> 00:08:11,140 ‫So, search posts 157 00:08:12,540 --> 00:08:15,180 ‫and search Query. 158 00:08:15,180 --> 00:08:17,043 ‫So, let's try that again now. 159 00:08:18,450 --> 00:08:23,070 ‫So, let's maybe reload, clear this. 160 00:08:23,070 --> 00:08:24,310 ‫Let's start recording 161 00:08:26,940 --> 00:08:28,680 ‫and stop that. 162 00:08:28,680 --> 00:08:31,200 ‫And so now let's take another look. 163 00:08:31,200 --> 00:08:34,480 ‫And so, well, let's actually 164 00:08:35,580 --> 00:08:38,943 ‫get back the setting here because I reloaded the page. 165 00:08:39,930 --> 00:08:41,313 ‫So let's do that again. 166 00:08:43,860 --> 00:08:45,600 ‫And so, let's see here. 167 00:08:45,600 --> 00:08:48,030 ‫So, this time actually we see 168 00:08:48,030 --> 00:08:50,910 ‫that all of these components did re-render 169 00:08:50,910 --> 00:08:53,703 ‫because their parent component has re-render. 170 00:08:55,170 --> 00:08:58,320 ‫So we didn't actually fix the wasted render itself 171 00:08:58,320 --> 00:09:02,250 ‫but we did fix the fact that this render was caused 172 00:09:02,250 --> 00:09:03,840 ‫by our context. 173 00:09:03,840 --> 00:09:07,740 ‫And so, if we were to memo now these components 174 00:09:07,740 --> 00:09:10,410 ‫for example, let's try out the main component 175 00:09:10,410 --> 00:09:13,533 ‫then none of these components should render anymore. 176 00:09:15,420 --> 00:09:17,700 ‫Now again, in this case 177 00:09:17,700 --> 00:09:21,420 ‫since we don't really have this app very slow 178 00:09:21,420 --> 00:09:22,420 ‫there is no need 179 00:09:23,610 --> 00:09:25,290 ‫really to memo this 180 00:09:25,290 --> 00:09:28,353 ‫but all this is more to show you. 181 00:09:30,180 --> 00:09:31,574 ‫Right? 182 00:09:31,574 --> 00:09:34,980 ‫So make sure that you, if you want to write this code 183 00:09:34,980 --> 00:09:36,813 ‫that you import the memo function. 184 00:09:41,250 --> 00:09:42,940 ‫So just like this 185 00:09:44,370 --> 00:09:48,273 ‫and then let's clean this and go again. 186 00:09:50,580 --> 00:09:51,750 ‫Let's close that. 187 00:09:51,750 --> 00:09:54,510 ‫And now indeed, none of these components 188 00:09:54,510 --> 00:09:56,940 ‫is re-rendered anymore. 189 00:09:56,940 --> 00:10:00,820 ‫While again, I will just go back here now 190 00:10:01,800 --> 00:10:03,363 ‫to placing that here. 191 00:10:05,340 --> 00:10:06,960 ‫And hopefully you're not bored 192 00:10:06,960 --> 00:10:10,560 ‫by all these explanations without writing a lot of code. 193 00:10:10,560 --> 00:10:14,613 ‫But this is actually a bit more theoretical than practical. 194 00:10:15,540 --> 00:10:18,840 ‫But anyway, let's now see again. 195 00:10:18,840 --> 00:10:22,860 ‫And now, we are back to these components right here 196 00:10:22,860 --> 00:10:26,370 ‫that consume the context to being re-rendered 197 00:10:26,370 --> 00:10:29,793 ‫simply because this object here was recreated. 198 00:10:30,870 --> 00:10:32,760 ‫So let's place that back 199 00:10:32,760 --> 00:10:34,983 ‫and with this it is a lot better. 200 00:10:36,000 --> 00:10:37,470 ‫All right? 201 00:10:37,470 --> 00:10:40,410 ‫Now actually, I was expecting 202 00:10:40,410 --> 00:10:45,180 ‫that React would ask me to also include these two functions 203 00:10:45,180 --> 00:10:48,150 ‫into the dependency array right here 204 00:10:48,150 --> 00:10:51,270 ‫because it seems to me that they are also dependencies 205 00:10:51,270 --> 00:10:53,610 ‫here of this object. 206 00:10:53,610 --> 00:10:57,840 ‫So in case you get that, then you need to add 207 00:10:57,840 --> 00:11:01,290 ‫handle add posts and this one to the dependency array. 208 00:11:01,290 --> 00:11:04,830 ‫But if you do that, then you also will need to wrap 209 00:11:04,830 --> 00:11:08,610 ‫these two into a used callback, because otherwise 210 00:11:08,610 --> 00:11:10,950 ‫on each re-render these functions here 211 00:11:10,950 --> 00:11:15,420 ‫will be recreated again, which will then in turn also 212 00:11:15,420 --> 00:11:17,853 ‫make this object to be recreated again. 213 00:11:19,350 --> 00:11:23,850 ‫Now right, but in this case, that didn't really happen. 214 00:11:23,850 --> 00:11:27,970 ‫Let me just see what happens if I do 215 00:11:28,862 --> 00:11:31,440 ‫handle add post here. 216 00:11:31,440 --> 00:11:33,510 ‫Yeah, so then I get that warning 217 00:11:33,510 --> 00:11:35,430 ‫that I was just telling you about 218 00:11:35,430 --> 00:11:39,240 ‫which is that this function makes the dependencies 219 00:11:39,240 --> 00:11:42,570 ‫of the use memo hook change on every render. 220 00:11:42,570 --> 00:11:45,780 ‫So move it inside that callback or wrap it 221 00:11:45,780 --> 00:11:48,090 ‫in its own use callback. 222 00:11:48,090 --> 00:11:51,300 ‫So this is pretty helpful here, actually. 223 00:11:51,300 --> 00:11:55,020 ‫But in this case, let's just remove this from here 224 00:11:55,020 --> 00:11:58,200 ‫since apparently it is not really necessary. 225 00:11:58,200 --> 00:12:03,200 ‫Okay, but anyway, now let's finally also check what happens 226 00:12:03,300 --> 00:12:06,840 ‫when we update the state that is actually part 227 00:12:06,840 --> 00:12:08,523 ‫of the context itself. 228 00:12:10,680 --> 00:12:12,990 ‫So let's clean this here. 229 00:12:12,990 --> 00:12:17,013 ‫And so one example of course, of that is right here. 230 00:12:18,000 --> 00:12:19,227 ‫So let's see. 231 00:12:19,227 --> 00:12:21,540 ‫And then of course, all the components 232 00:12:21,540 --> 00:12:25,650 ‫that consume this context are re-rendered. 233 00:12:25,650 --> 00:12:30,650 ‫So that's the list, the search posts and the header itself 234 00:12:31,500 --> 00:12:33,420 ‫and I think also the archive 235 00:12:33,420 --> 00:12:35,223 ‫but somehow it doesn't show up here. 236 00:12:37,260 --> 00:12:41,280 ‫So, here it is again in this ranked chart. 237 00:12:41,280 --> 00:12:43,260 ‫So here we always have all of them 238 00:12:43,260 --> 00:12:47,730 ‫and then we can see that also all of these were re-rendered 239 00:12:47,730 --> 00:12:50,490 ‫because context has changed. 240 00:12:50,490 --> 00:12:51,960 ‫Now, I'm showing you this 241 00:12:51,960 --> 00:12:54,960 ‫because if you have many, many components 242 00:12:54,960 --> 00:12:57,600 ‫that are subscribed to a context 243 00:12:57,600 --> 00:13:00,300 ‫so that read data from a context 244 00:13:00,300 --> 00:13:02,160 ‫it will become problematic 245 00:13:02,160 --> 00:13:04,830 ‫to have so many different variables 246 00:13:04,830 --> 00:13:07,200 ‫inside the context value. 247 00:13:07,200 --> 00:13:10,770 ‫Because as soon as you change one of these states 248 00:13:10,770 --> 00:13:13,560 ‫for example, the post or the search Query 249 00:13:13,560 --> 00:13:16,290 ‫then all of the components that read 250 00:13:16,290 --> 00:13:20,610 ‫at least one of these five values will get re-rendered. 251 00:13:20,610 --> 00:13:23,430 ‫And so, again, this is not ideal 252 00:13:23,430 --> 00:13:26,760 ‫and it's the reason why in the beginning I told you 253 00:13:26,760 --> 00:13:31,020 ‫that we usually create one context per state. 254 00:13:31,020 --> 00:13:33,540 ‫So we would have one post context 255 00:13:33,540 --> 00:13:35,760 ‫and one search Query context. 256 00:13:35,760 --> 00:13:39,000 ‫And so, in that situation, whenever we updated 257 00:13:39,000 --> 00:13:42,300 ‫for example, the search Query, then all the components 258 00:13:42,300 --> 00:13:46,050 ‫that consume the posts would not get re-rendered. 259 00:13:46,050 --> 00:13:48,600 ‫While in this case, all of them are 260 00:13:48,600 --> 00:13:52,680 ‫because it is enough for one value here to change 261 00:13:52,680 --> 00:13:55,380 ‫to re-render the entire thing. 262 00:13:55,380 --> 00:13:58,680 ‫Now, I'm not gonna do that right here, but again 263 00:13:58,680 --> 00:14:01,920 ‫you can basically create one context 264 00:14:01,920 --> 00:14:05,610 ‫for this part and one context for this. 265 00:14:05,610 --> 00:14:07,590 ‫And then, what some people do 266 00:14:07,590 --> 00:14:10,410 ‫is to even take it one step further. 267 00:14:10,410 --> 00:14:12,360 ‫So inside the search Query context 268 00:14:12,360 --> 00:14:16,110 ‫you could even create one context only for the search Query 269 00:14:16,110 --> 00:14:19,533 ‫and one only for the state, update or function. 270 00:14:20,586 --> 00:14:22,638 ‫Or if you're using a reducer 271 00:14:22,638 --> 00:14:23,700 ‫you could then create one context 272 00:14:23,700 --> 00:14:27,930 ‫for the state and one context for the dispatch function. 273 00:14:27,930 --> 00:14:30,960 ‫And again, I cannot really show you that here 274 00:14:30,960 --> 00:14:34,140 ‫in this example because it'll depend so much 275 00:14:34,140 --> 00:14:35,730 ‫on your own situation 276 00:14:35,730 --> 00:14:39,360 ‫so, on your own application that you're building. 277 00:14:39,360 --> 00:14:41,910 ‫So these were just a few general guidelines 278 00:14:41,910 --> 00:14:45,183 ‫that I hope will become useful for you in the future.