1 00:00:01,290 --> 00:00:02,640 ‫After useMemo, 2 00:00:02,640 --> 00:00:06,423 ‫now it's time to quickly also use useCallback. 3 00:00:07,680 --> 00:00:09,360 ‫And as we already know, 4 00:00:09,360 --> 00:00:13,560 ‫the goal of the useCallback hook is to memorize functions. 5 00:00:13,560 --> 00:00:17,910 ‫And so, to test this, let's now paste in a function again 6 00:00:17,910 --> 00:00:19,833 ‫into the archive component. 7 00:00:20,940 --> 00:00:23,880 ‫Let's now bring back the onAddPost prop 8 00:00:27,180 --> 00:00:30,063 ‫that we had here initially, but that we removed. 9 00:00:31,320 --> 00:00:36,320 ‫OnAddPost should be handleAddPost, like this. 10 00:00:38,040 --> 00:00:43,040 ‫And then, let's grab this prop and receive that here 11 00:00:44,880 --> 00:00:48,120 ‫in our memorized archive component, 12 00:00:48,120 --> 00:00:52,833 ‫and then we can reactivate this button right here. 13 00:00:53,820 --> 00:00:55,570 ‫And so then, if we reload this 14 00:00:57,630 --> 00:00:58,983 ‫until it's clear, 15 00:01:00,900 --> 00:01:04,080 ‫so now we get this button here that we can click 16 00:01:04,080 --> 00:01:08,730 ‫and that will then, as you see here, edit to this list. 17 00:01:08,730 --> 00:01:10,980 ‫And so now, we have 31 posts 18 00:01:10,980 --> 00:01:15,690 ‫and if we add another one, then we have 32 and so on. 19 00:01:15,690 --> 00:01:18,600 ‫That's the goal of that function. 20 00:01:18,600 --> 00:01:20,970 ‫Now, the problem with that is 21 00:01:20,970 --> 00:01:25,113 ‫is that now we are back to having the same issue as before. 22 00:01:25,950 --> 00:01:30,950 ‫Let's, again, well first, let's close this actually 23 00:01:31,260 --> 00:01:34,350 ‫so that we have DB four and after. 24 00:01:34,350 --> 00:01:39,000 ‫And actually let's this time test with this button here. 25 00:01:39,000 --> 00:01:42,810 ‫This fake dark mode button also changes state 26 00:01:42,810 --> 00:01:44,370 ‫on the app component. 27 00:01:44,370 --> 00:01:47,223 ‫And so, it will also re-render the archive. 28 00:01:48,330 --> 00:01:53,330 ‫Let's click that, then let's open the list, 29 00:01:53,460 --> 00:01:55,683 ‫and then, let's set the state again. 30 00:01:56,670 --> 00:01:59,883 ‫And so, maybe you saw that it took a long time. 31 00:02:00,720 --> 00:02:03,990 ‫And yeah, so we are back again 32 00:02:03,990 --> 00:02:08,250 ‫to having our memorized component re-render even though, 33 00:02:08,250 --> 00:02:10,980 ‫well, even though it is memorized. 34 00:02:10,980 --> 00:02:15,050 ‫We had the same problem earlier in the previous lecture... 35 00:02:17,970 --> 00:02:20,730 ‫because of this prop here, which is an object, 36 00:02:20,730 --> 00:02:24,990 ‫but we solved that by memorizing it using useMemo. 37 00:02:24,990 --> 00:02:29,220 ‫And so now, we have the same problem but with a function. 38 00:02:29,220 --> 00:02:32,610 ‫Now, this function here is causing us the same problem, 39 00:02:32,610 --> 00:02:35,400 ‫and the solution is the same. 40 00:02:35,400 --> 00:02:39,870 ‫The solution is also to now memorize this function. 41 00:02:39,870 --> 00:02:44,870 ‫And so, let's do that by using the useCallback hook. 42 00:02:46,230 --> 00:02:50,850 ‫Make sure that it gets imported from React. 43 00:02:50,850 --> 00:02:54,750 ‫And then here, again, the dependency array, which is empty. 44 00:02:54,750 --> 00:02:57,840 ‫And so, this will then return the memorized function, 45 00:02:57,840 --> 00:03:02,433 ‫which we can then store into a regular const variable. 46 00:03:06,300 --> 00:03:08,463 ‫Now okay, and that's actually it. 47 00:03:09,330 --> 00:03:13,200 ‫You see that useMemo and useCallback are pretty similar, 48 00:03:13,200 --> 00:03:15,480 ‫but the difference is that useCallback 49 00:03:15,480 --> 00:03:18,480 ‫will not immediately call this function, 50 00:03:18,480 --> 00:03:21,840 ‫but will instead simply memorize this function, 51 00:03:21,840 --> 00:03:25,260 ‫while here, useMemo will basically simply 52 00:03:25,260 --> 00:03:29,010 ‫memorize the result of calling this callback. 53 00:03:29,010 --> 00:03:30,870 ‫That's the main difference. 54 00:03:30,870 --> 00:03:34,920 ‫UseMemo just stores a result, so like a value, 55 00:03:34,920 --> 00:03:37,530 ‫which is the result of this callback, 56 00:03:37,530 --> 00:03:41,580 ‫while here, in useCallback, only the function itself 57 00:03:41,580 --> 00:03:44,880 ‫is actually memorized now. 58 00:03:44,880 --> 00:03:48,060 ‫All right, and so, this should already be enough 59 00:03:48,060 --> 00:03:49,323 ‫to solve our problem. 60 00:03:50,310 --> 00:03:51,900 ‫Let's clear that. 61 00:03:51,900 --> 00:03:54,750 ‫Let's do exactly the same thing again. 62 00:03:54,750 --> 00:03:55,743 ‫This was fast. 63 00:03:57,690 --> 00:03:59,043 ‫And let's see, 64 00:03:59,910 --> 00:04:02,760 ‫and this also seemed pretty fast 65 00:04:02,760 --> 00:04:06,415 ‫and our profiler confirms that result. 66 00:04:06,415 --> 00:04:11,070 ‫We are back to not re-rendering the archive component. 67 00:04:11,070 --> 00:04:14,160 ‫Memorization is back to working indeed. 68 00:04:14,160 --> 00:04:17,460 ‫And we also noticed a very noticeable difference 69 00:04:17,460 --> 00:04:21,990 ‫in the speed and snappiness of our application. 70 00:04:21,990 --> 00:04:24,090 ‫Now, some teams, for some reason, 71 00:04:24,090 --> 00:04:27,510 ‫choose to wrap each and every function and value 72 00:04:27,510 --> 00:04:31,170 ‫into a useCallback or a useMemo, 73 00:04:31,170 --> 00:04:33,960 ‫but that actually makes very little sense 74 00:04:33,960 --> 00:04:37,080 ‫and it might even do more harm than good 75 00:04:37,080 --> 00:04:39,300 ‫in most of these cases. 76 00:04:39,300 --> 00:04:42,960 ‫Using one of these functions here, like useCallback, 77 00:04:42,960 --> 00:04:45,690 ‫actually has a cost as well. 78 00:04:45,690 --> 00:04:47,670 ‫React needs to run this function 79 00:04:47,670 --> 00:04:50,040 ‫and needs to store the function in memory. 80 00:04:50,040 --> 00:04:51,750 ‫And so, that only makes sense 81 00:04:51,750 --> 00:04:56,190 ‫if we actually see some improvement here in our application. 82 00:04:56,190 --> 00:04:58,920 ‫For example, this component right here, 83 00:04:58,920 --> 00:05:01,950 ‫there's no need to wrap it into a useCallback 84 00:05:01,950 --> 00:05:04,890 ‫because this is not creating any problems for us 85 00:05:04,890 --> 00:05:06,990 ‫anywhere in the application. 86 00:05:06,990 --> 00:05:10,770 ‫And so, it's best to just find some slow components 87 00:05:10,770 --> 00:05:14,760 ‫that do actually have a visible bad performance 88 00:05:14,760 --> 00:05:17,760 ‫and then using the tools that we just learned about 89 00:05:17,760 --> 00:05:19,950 ‫to only optimize those. 90 00:05:19,950 --> 00:05:20,970 ‫Okay? 91 00:05:20,970 --> 00:05:23,490 ‫But we already talked about that before 92 00:05:23,490 --> 00:05:26,310 ‫when I first introduced these two hooks 93 00:05:26,310 --> 00:05:29,040 ‫where I showed you the three big use cases 94 00:05:29,040 --> 00:05:30,960 ‫of these two hooks. 95 00:05:30,960 --> 00:05:33,000 ‫Now, one thing that I wanted to mention, 96 00:05:33,000 --> 00:05:35,220 ‫which I didn't mention in that lecture, 97 00:05:35,220 --> 00:05:39,960 ‫is that in the future, the need to doing any of this stuff, 98 00:05:39,960 --> 00:05:41,970 ‫like any of the memorization, 99 00:05:41,970 --> 00:05:44,550 ‫might actually disappear completely 100 00:05:44,550 --> 00:05:48,660 ‫because the React team is currently researching a compiler 101 00:05:48,660 --> 00:05:52,770 ‫that would basically automatically memorize all the values 102 00:05:52,770 --> 00:05:55,890 ‫that need memorization behind the scenes. 103 00:05:55,890 --> 00:05:58,500 ‫But still, even with that on the horizon, 104 00:05:58,500 --> 00:06:02,100 ‫it is still very good to know about all of this stuff, 105 00:06:02,100 --> 00:06:05,790 ‫first, because that compiler might actually never happen, 106 00:06:05,790 --> 00:06:09,150 ‫and second, because you will still see 107 00:06:09,150 --> 00:06:13,170 ‫these hooks here all the time in a bit older code bases, 108 00:06:13,170 --> 00:06:16,230 ‫so you should definitely know about how this works, 109 00:06:16,230 --> 00:06:19,320 ‫and, of course, also know how to use the profiler 110 00:06:19,320 --> 00:06:21,840 ‫to find some low performing components, 111 00:06:21,840 --> 00:06:23,970 ‫and also all the other techniques 112 00:06:23,970 --> 00:06:27,660 ‫that we're gonna talk about throughout this section. 113 00:06:27,660 --> 00:06:30,300 ‫And finally, I want to just quickly finish 114 00:06:30,300 --> 00:06:32,013 ‫with a small experiment. 115 00:06:33,240 --> 00:06:37,560 ‫Let's paste in another function into our archive component, 116 00:06:37,560 --> 00:06:40,650 ‫but this time, a special one. 117 00:06:40,650 --> 00:06:44,940 ‫Let's say here, this setIsDark function, 118 00:06:44,940 --> 00:06:47,430 ‫and I say special because this is the function 119 00:06:47,430 --> 00:06:50,070 ‫that is returned from use state. 120 00:06:50,070 --> 00:06:53,793 ‫And so, let's paste that as a prop just to see what happens. 121 00:06:55,410 --> 00:06:56,613 ‫Already paste that. 122 00:06:58,922 --> 00:07:01,250 ‫SetIsFakeDark... 123 00:07:03,810 --> 00:07:05,133 ‫and just like this. 124 00:07:07,170 --> 00:07:10,290 ‫We are, again, now pasting a callback function here 125 00:07:10,290 --> 00:07:13,680 ‫as a prop, which we did not memorize. 126 00:07:13,680 --> 00:07:18,243 ‫Let's see if that will then again slow down our component. 127 00:07:19,080 --> 00:07:19,983 ‫Let's record. 128 00:07:20,880 --> 00:07:22,290 ‫Let's do it once. 129 00:07:22,290 --> 00:07:26,250 ‫And so, the fast version, and again, 130 00:07:26,250 --> 00:07:28,590 ‫but it did seem pretty fast. 131 00:07:28,590 --> 00:07:30,390 ‫Maybe you noticed that as well. 132 00:07:30,390 --> 00:07:34,860 ‫And we see that actually the archive did not re-render, 133 00:07:34,860 --> 00:07:38,430 ‫so the memorization is indeed still working, 134 00:07:38,430 --> 00:07:43,418 ‫so even though we did not memorize setIsFakeDark. 135 00:07:43,418 --> 00:07:45,870 ‫Why do you think that is? 136 00:07:45,870 --> 00:07:50,280 ‫Well, basically React guarantees that the setter functions 137 00:07:50,280 --> 00:07:54,390 ‫of the use state hook always have a stable identity, 138 00:07:54,390 --> 00:07:58,050 ‫which means that they will not change on renders. 139 00:07:58,050 --> 00:08:01,260 ‫We can basically think of these state setter functions 140 00:08:01,260 --> 00:08:04,050 ‫as being automatically memorized. 141 00:08:04,050 --> 00:08:06,900 ‫And in fact, this is also the reason 142 00:08:06,900 --> 00:08:09,480 ‫why it's completely okay to omit them 143 00:08:09,480 --> 00:08:13,290 ‫from the dependency array of all these hooks, 144 00:08:13,290 --> 00:08:16,923 ‫so from useEffect, useCallback, and useMemo. 145 00:08:17,910 --> 00:08:22,910 ‫In fact, we do have a state setter function right here. 146 00:08:23,190 --> 00:08:26,460 ‫We are using a function here inside this useCallback, 147 00:08:26,460 --> 00:08:30,690 ‫but still, React, or ESLint, is not complaining 148 00:08:30,690 --> 00:08:32,370 ‫that we're not using that function 149 00:08:32,370 --> 00:08:34,350 ‫here in the dependency array, 150 00:08:34,350 --> 00:08:37,650 ‫while if we were, for example, to use, 151 00:08:37,650 --> 00:08:40,320 ‫for example, just the posts, 152 00:08:40,320 --> 00:08:42,990 ‫then here, React would complain. 153 00:08:42,990 --> 00:08:45,480 ‫Here, we would then have to place the posts 154 00:08:45,480 --> 00:08:47,220 ‫inside the dependency array 155 00:08:47,220 --> 00:08:49,800 ‫so that whenever the posts change, 156 00:08:49,800 --> 00:08:53,610 ‫React could then update the function here in the cache, 157 00:08:53,610 --> 00:08:56,250 ‫so it could basically cache the new version 158 00:08:56,250 --> 00:08:59,250 ‫of this function with these new variables. 159 00:08:59,250 --> 00:09:02,130 ‫But again, with the state setter functions, 160 00:09:02,130 --> 00:09:03,720 ‫that's not necessary. 161 00:09:03,720 --> 00:09:06,600 ‫And that's true for all the dependency arrays 162 00:09:06,600 --> 00:09:09,420 ‫and all the three hooks that have them. 163 00:09:09,420 --> 00:09:12,480 ‫Now okay, now that's actually all I had to tell you 164 00:09:12,480 --> 00:09:15,420 ‫about these three important tools. 165 00:09:15,420 --> 00:09:18,930 ‫Memo, useMemo, and useCallback. 166 00:09:18,930 --> 00:09:20,640 ‫Now, as I mentioned earlier, 167 00:09:20,640 --> 00:09:23,550 ‫you're not going to use these tools all the time 168 00:09:23,550 --> 00:09:26,280 ‫when you work with your own React applications, 169 00:09:26,280 --> 00:09:29,640 ‫but you still need to have them in your toolbox. 170 00:09:29,640 --> 00:09:32,760 ‫And I know that they are really quite confusing 171 00:09:32,760 --> 00:09:35,760 ‫in the beginning, so it took me actually a long time 172 00:09:35,760 --> 00:09:39,060 ‫to understand when I should use each of them, 173 00:09:39,060 --> 00:09:43,170 ‫but that's why I tried to give you these demonstrations 174 00:09:43,170 --> 00:09:46,830 ‫to show you the use cases in the theory lecture, 175 00:09:46,830 --> 00:09:49,140 ‫and then all you can do now 176 00:09:49,140 --> 00:09:51,480 ‫is to really practice these functions 177 00:09:51,480 --> 00:09:55,140 ‫maybe in your own examples, or yeah, in the future, 178 00:09:55,140 --> 00:09:59,400 ‫in your own applications as well, as the need arises. 179 00:09:59,400 --> 00:10:00,360 ‫Okay? 180 00:10:00,360 --> 00:10:01,920 ‫And actually, next up, 181 00:10:01,920 --> 00:10:04,470 ‫we will use some of these tools a bit more 182 00:10:04,470 --> 00:10:06,513 ‫to optimize context.