1 00:00:01,170 --> 00:00:04,230 ‫In the last lecture we found a situation where 2 00:00:04,230 --> 00:00:08,400 ‫the memo function didn't actually work as expected. 3 00:00:08,400 --> 00:00:11,490 ‫And so let's now understand why that happens 4 00:00:11,490 --> 00:00:13,443 ‫and learn about the solution. 5 00:00:14,790 --> 00:00:18,180 ‫And let's start from what we already know. 6 00:00:18,180 --> 00:00:20,400 ‫So we know that in React 7 00:00:20,400 --> 00:00:23,190 ‫whenever a component instance re-renders 8 00:00:23,190 --> 00:00:26,610 ‫everything in there is recreated. 9 00:00:26,610 --> 00:00:29,880 ‫So all values are always created again 10 00:00:29,880 --> 00:00:31,410 ‫and that includes objects 11 00:00:31,410 --> 00:00:35,250 ‫and functions that are defined within the component. 12 00:00:35,250 --> 00:00:39,240 ‫So a new render gets new functions and new objects 13 00:00:39,240 --> 00:00:43,380 ‫even if they are the exact same ones as before. 14 00:00:43,380 --> 00:00:46,710 ‫We also know that in JavaScript two objects 15 00:00:46,710 --> 00:00:48,960 ‫or functions that look the same, 16 00:00:48,960 --> 00:00:51,930 ‫so that are exactly the same code 17 00:00:51,930 --> 00:00:55,560 ‫are actually different unique objects. 18 00:00:55,560 --> 00:00:57,840 ‫And the classic example here is 19 00:00:57,840 --> 00:01:02,073 ‫that an empty object is different from another empty object. 20 00:01:02,910 --> 00:01:05,520 ‫Now, from these two pieces of information, 21 00:01:05,520 --> 00:01:08,730 ‫we can understand that if we pass a function 22 00:01:08,730 --> 00:01:12,120 ‫or an object to a child component as a prop, 23 00:01:12,120 --> 00:01:14,820 ‫that child component will always see them 24 00:01:14,820 --> 00:01:18,480 ‫as new props whenever there is a re-render. 25 00:01:18,480 --> 00:01:21,750 ‫And if props are different between re-renders 26 00:01:21,750 --> 00:01:26,750 ‫then memo will simply not work, so it will not do its job. 27 00:01:26,940 --> 00:01:30,300 ‫So in summary, if we memorize a component 28 00:01:30,300 --> 00:01:33,570 ‫but then give it objects or functions as props, 29 00:01:33,570 --> 00:01:36,600 ‫the component will always re-render anyway 30 00:01:36,600 --> 00:01:40,590 ‫because it'll always see these props as new props, 31 00:01:40,590 --> 00:01:43,563 ‫even when they actually look exactly the same. 32 00:01:44,490 --> 00:01:49,050 ‫Okay, but there must be some kind of solution, right? 33 00:01:49,050 --> 00:01:51,510 ‫Well, of course there is. 34 00:01:51,510 --> 00:01:55,380 ‫So we can make objects and functions stable 35 00:01:55,380 --> 00:01:57,360 ‫so we can actually preserve them 36 00:01:57,360 --> 00:02:01,080 ‫between renders by memorizing them as well. 37 00:02:01,080 --> 00:02:04,710 ‫And to do that, React gives us two more hooks. 38 00:02:04,710 --> 00:02:07,353 ‫UseMemo and useCallback. 39 00:02:08,190 --> 00:02:12,030 ‫So we can use useMemo to memorize any value 40 00:02:12,030 --> 00:02:14,640 ‫that we want to preserve between renders 41 00:02:14,640 --> 00:02:19,020 ‫and useCallback to memorize functions between renders. 42 00:02:19,020 --> 00:02:22,740 ‫And I will just use the word values for everything here 43 00:02:22,740 --> 00:02:24,900 ‫because useCallback is actually 44 00:02:24,900 --> 00:02:27,513 ‫just a special case of useMemo. 45 00:02:28,590 --> 00:02:32,370 ‫But anyway, what does memorization of values 46 00:02:32,370 --> 00:02:34,320 ‫actually look like? 47 00:02:34,320 --> 00:02:37,410 ‫Well, the idea is similar to the memorization 48 00:02:37,410 --> 00:02:39,930 ‫that we just talked about before. 49 00:02:39,930 --> 00:02:43,320 ‫So whatever value that we pass into useMemo 50 00:02:43,320 --> 00:02:47,370 ‫or useCallback will basically be stored in memory 51 00:02:47,370 --> 00:02:49,230 ‫and that cached value will 52 00:02:49,230 --> 00:02:52,470 ‫then be returned in future re-renders. 53 00:02:52,470 --> 00:02:55,380 ‫So it will be preserved across renders 54 00:02:55,380 --> 00:02:58,413 ‫as long as the inputs stay the same. 55 00:02:59,340 --> 00:03:02,520 ‫Now in the case of useMemo and useCallback 56 00:03:02,520 --> 00:03:07,200 ‫these inputs that I just mentioned are called dependencies. 57 00:03:07,200 --> 00:03:09,487 ‫So just like the useEffect hook, 58 00:03:09,487 --> 00:03:13,590 ‫useMemo and useCallback also have a dependency array. 59 00:03:13,590 --> 00:03:15,840 ‫And this is how it works. 60 00:03:15,840 --> 00:03:18,570 ‫Whenever one of the dependencies change 61 00:03:18,570 --> 00:03:21,990 ‫the value will no longer be returned from the cache 62 00:03:21,990 --> 00:03:24,900 ‫but will instead be recreated. 63 00:03:24,900 --> 00:03:27,990 ‫So this is very similar to the memo function where 64 00:03:27,990 --> 00:03:32,370 ‫a component gets recreated whenever the props change. 65 00:03:32,370 --> 00:03:35,610 ‫It's just a different thing that we're memorizing here 66 00:03:35,610 --> 00:03:38,490 ‫and a different way of specifying the inputs. 67 00:03:38,490 --> 00:03:40,950 ‫But the idea is the same. 68 00:03:40,950 --> 00:03:42,930 ‫And this will all become quite clear 69 00:03:42,930 --> 00:03:45,030 ‫once we start writing the code. 70 00:03:45,030 --> 00:03:48,990 ‫But for now, let's visualize what we just learned. 71 00:03:48,990 --> 00:03:52,740 ‫So the regular behavior in React when we do not 72 00:03:52,740 --> 00:03:55,560 ‫memorize a certain value is of course 73 00:03:55,560 --> 00:03:57,720 ‫that a new value is created 74 00:03:57,720 --> 00:04:00,420 ‫whenever the component re-renders. 75 00:04:00,420 --> 00:04:03,810 ‫On the other hand, when we do memorize the value 76 00:04:03,810 --> 00:04:07,620 ‫then no new value is created on re-render 77 00:04:07,620 --> 00:04:10,950 ‫and the cached value is returned instead. 78 00:04:10,950 --> 00:04:15,030 ‫And so like this, the value will stay exactly the same 79 00:04:15,030 --> 00:04:18,390 ‫so it will be stable across renders. 80 00:04:18,390 --> 00:04:20,520 ‫However, this is only true 81 00:04:20,520 --> 00:04:23,070 ‫if the dependencies that we specify 82 00:04:23,070 --> 00:04:26,130 ‫in the dependency array don't change. 83 00:04:26,130 --> 00:04:30,630 ‫If they do change, then a new value is actually created 84 00:04:30,630 --> 00:04:33,723 ‫as if the memorization has never happened. 85 00:04:34,770 --> 00:04:37,710 ‫Okay, now this all sounds great 86 00:04:37,710 --> 00:04:40,590 ‫but when do we actually need this? 87 00:04:40,590 --> 00:04:44,220 ‫Well, remember that we started this lecture by saying 88 00:04:44,220 --> 00:04:47,370 ‫that we need to make objects or functions stable 89 00:04:47,370 --> 00:04:51,390 ‫in order to actually make the memo function work. 90 00:04:51,390 --> 00:04:54,900 ‫In other words, if props are objects or functions, 91 00:04:54,900 --> 00:04:56,910 ‫we need to memorize these props 92 00:04:56,910 --> 00:04:59,760 ‫in order to prevent wasted renders. 93 00:04:59,760 --> 00:05:01,980 ‫So that's what the very first slide 94 00:05:01,980 --> 00:05:05,310 ‫of the lecture was all about, right? 95 00:05:05,310 --> 00:05:08,460 ‫And this use case is probably the biggest use case 96 00:05:08,460 --> 00:05:11,100 ‫for useMemo and useCallback. 97 00:05:11,100 --> 00:05:13,470 ‫And it made it very easy to understand 98 00:05:13,470 --> 00:05:16,590 ‫why there is a need for these hooks. 99 00:05:16,590 --> 00:05:20,536 ‫However, there are actually two additional use cases. 100 00:05:20,536 --> 00:05:23,520 ‫So the second use case is to avoid 101 00:05:23,520 --> 00:05:27,240 ‫expensive recalculations on every render. 102 00:05:27,240 --> 00:05:30,600 ‫For example, you might have a derived state that is 103 00:05:30,600 --> 00:05:35,010 ‫calculated from an array of 100,000 items. 104 00:05:35,010 --> 00:05:38,220 ‫Now, if your component re-renders all the time, 105 00:05:38,220 --> 00:05:41,490 ‫then React needs to do this expensive calculation 106 00:05:41,490 --> 00:05:45,330 ‫over and over again each time there is a render. 107 00:05:45,330 --> 00:05:49,230 ‫And so to fix this, you can simply preserve the results 108 00:05:49,230 --> 00:05:53,970 ‫of that calculation across renders using useMemo. 109 00:05:53,970 --> 00:05:56,910 ‫And so then React doesn't have to calculate 110 00:05:56,910 --> 00:05:59,493 ‫the same thing time and time again. 111 00:06:00,330 --> 00:06:03,990 ‫Finally, another use case is memorizing values 112 00:06:03,990 --> 00:06:07,680 ‫that are used in the dependency array of other hooks, 113 00:06:07,680 --> 00:06:12,680 ‫for example, in order to avoid infinite useEffect loops. 114 00:06:12,780 --> 00:06:15,180 ‫Now, just like with the memo function 115 00:06:15,180 --> 00:06:18,870 ‫it's important to not overuse these hooks. 116 00:06:18,870 --> 00:06:21,240 ‫So you should probably only use them 117 00:06:21,240 --> 00:06:23,970 ‫for one of these three use cases 118 00:06:23,970 --> 00:06:27,000 ‫and not start memorizing every single object 119 00:06:27,000 --> 00:06:28,863 ‫and function everywhere. 120 00:06:29,760 --> 00:06:33,030 ‫But anyway, with all this being said 121 00:06:33,030 --> 00:06:36,303 ‫it's time to finally try this out with code.