1
00:00:01,080 --> 00:00:03,570
‫Let's now use the useMemo hook

2
00:00:03,570 --> 00:00:06,930
‫to fix that problem that we created ourselves

3
00:00:06,930 --> 00:00:09,483
‫with the archive component earlier.

4
00:00:11,100 --> 00:00:16,100
‫So remember how earlier, we created this object right here

5
00:00:16,200 --> 00:00:20,850
‫and then passed that as a prop into the archive component.

6
00:00:20,850 --> 00:00:25,800
‫Now, the problem with this is that doing so actually breaks

7
00:00:25,800 --> 00:00:30,240
‫the memoization that we created for the archive component.

8
00:00:30,240 --> 00:00:34,680
‫So we saw that here in the profiler also earlier

9
00:00:34,680 --> 00:00:38,250
‫where we saw that, after the archive is open,

10
00:00:38,250 --> 00:00:41,070
‫then it again takes a long time for us

11
00:00:41,070 --> 00:00:43,593
‫to see the results of typing here.

12
00:00:44,760 --> 00:00:47,910
‫So we can also see that in action because the application

13
00:00:47,910 --> 00:00:52,910
‫is really laggy and unresponsive as we type into this field.

14
00:00:53,430 --> 00:00:56,730
‫So as we just learned in the previous lecture, the reason

15
00:00:56,730 --> 00:01:00,900
‫for that is that this object right here is recreated over

16
00:01:00,900 --> 00:01:05,310
‫and over again each time that the app component re-renders.

17
00:01:05,310 --> 00:01:07,980
‫And so basically, then the prop

18
00:01:07,980 --> 00:01:11,910
‫that the archive receives will always be different.

19
00:01:11,910 --> 00:01:15,123
‫And so then, of course, memo doesn't do anything.

20
00:01:16,950 --> 00:01:18,300
‫So what we need to do

21
00:01:18,300 --> 00:01:22,200
‫is to make this object here stable over time,

22
00:01:22,200 --> 00:01:25,803
‫and so that's where the useMemo hook comes into play.

23
00:01:26,790 --> 00:01:31,590
‫So let's use that hook here, so useMemo,

24
00:01:31,590 --> 00:01:34,533
‫which, again, needs to be imported from React.

25
00:01:35,460 --> 00:01:39,360
‫So let's call that, but now it is actually not as simple

26
00:01:39,360 --> 00:01:43,710
‫as just wrapping this entire object into useMemo.

27
00:01:43,710 --> 00:01:45,810
‫So that's not how it works.

28
00:01:45,810 --> 00:01:50,010
‫Instead, useMemo actually takes in a callback function,

29
00:01:50,010 --> 00:01:52,830
‫which will be called on the initial render.

30
00:01:52,830 --> 00:01:55,713
‫So very similar to the useState hook.

31
00:01:56,910 --> 00:02:00,730
‫So in this case, all we need is an arrow function

32
00:02:02,430 --> 00:02:05,493
‫which we want to return our object.

33
00:02:06,990 --> 00:02:11,373
‫So return this object right here.

34
00:02:14,280 --> 00:02:18,570
‫All right, so this callback function here is basically

35
00:02:18,570 --> 00:02:21,960
‫to work that should be performed on the initial render

36
00:02:21,960 --> 00:02:26,130
‫and which result should be then stored in the cache,

37
00:02:26,130 --> 00:02:28,230
‫so should be stored in memory

38
00:02:28,230 --> 00:02:31,980
‫so that React can remember it across re-renders.

39
00:02:31,980 --> 00:02:33,900
‫Now, in this case, all we're doing

40
00:02:33,900 --> 00:02:37,170
‫is to return an object here, but there could be also

41
00:02:37,170 --> 00:02:39,930
‫some more intensive calculation going on,

42
00:02:39,930 --> 00:02:44,190
‫which is the reason why useMemo takes in a function

43
00:02:44,190 --> 00:02:45,813
‫and not just a value.

44
00:02:47,010 --> 00:02:51,690
‫All right, so again, whatever we return from this function

45
00:02:51,690 --> 00:02:54,120
‫will be saved in the cache.

46
00:02:54,120 --> 00:02:56,820
‫And so then remember, we also need to pass in

47
00:02:56,820 --> 00:03:00,120
‫the dependency array, which will basically determine

48
00:03:00,120 --> 00:03:04,710
‫when this whole calculation here is executed again.

49
00:03:04,710 --> 00:03:08,550
‫So just like the useEffect hook, right?

50
00:03:08,550 --> 00:03:12,840
‫So by specifying an empty dependency array here, that means

51
00:03:12,840 --> 00:03:16,440
‫that this value will only be computed once in the beginning

52
00:03:16,440 --> 00:03:21,120
‫and will then never change, so it will never be recomputed.

53
00:03:21,120 --> 00:03:24,483
‫And so this should actually already have fixed it.

54
00:03:25,380 --> 00:03:29,850
‫So let's re-render here, clear that,

55
00:03:29,850 --> 00:03:32,343
‫and now our archive is closed.

56
00:03:34,320 --> 00:03:36,813
‫And of course, we want to profile this again.

57
00:03:38,730 --> 00:03:40,740
‫So this is fast as always.

58
00:03:40,740 --> 00:03:44,820
‫Then we just open this again, which takes its time,

59
00:03:44,820 --> 00:03:47,973
‫and now we will see if that memoing has worked.

60
00:03:49,170 --> 00:03:52,740
‫And it was really fast, so it looks like it did.

61
00:03:52,740 --> 00:03:57,600
‫And indeed, the archive was not rendered in the beginning

62
00:03:57,600 --> 00:03:59,973
‫and also not, as it was already opened.

63
00:04:00,870 --> 00:04:03,420
‫Great, so we fixed the problem

64
00:04:03,420 --> 00:04:07,800
‫and our memoized component is now back to working.

65
00:04:07,800 --> 00:04:11,370
‫So we have now this stable value here over time,

66
00:04:11,370 --> 00:04:13,860
‫which will simply be taken from the cache

67
00:04:13,860 --> 00:04:17,160
‫as long as the dependencies don't change.

68
00:04:17,160 --> 00:04:20,340
‫And speaking of the dependencies again, right now,

69
00:04:20,340 --> 00:04:24,153
‫we don't have any, but actually, let's create some.

70
00:04:25,560 --> 00:04:27,150
‫Or at least one.

71
00:04:27,150 --> 00:04:29,880
‫So here, I now want to change the title

72
00:04:29,880 --> 00:04:33,210
‫to use a stateful variable.

73
00:04:33,210 --> 00:04:36,893
‫So to use the posts.

74
00:04:39,390 --> 00:04:44,100
‫So now here, I want to say post archive in addition to,

75
00:04:44,100 --> 00:04:46,293
‫and then the number of the main posts.

76
00:04:47,580 --> 00:04:52,580
‫So that is posts.length, so it's not the filtered posts,

77
00:04:54,360 --> 00:04:56,460
‫so it's not this value right here,

78
00:04:56,460 --> 00:04:59,433
‫but really the amount of posts that exist.

79
00:05:00,420 --> 00:05:03,570
‫And so now we need to specify that value here

80
00:05:03,570 --> 00:05:06,540
‫in the dependency array because otherwise,

81
00:05:06,540 --> 00:05:09,900
‫this object here will never be recomputed.

82
00:05:09,900 --> 00:05:13,170
‫And so let me first show you that actually,

83
00:05:13,170 --> 00:05:14,343
‫this is how it works.

84
00:05:15,360 --> 00:05:20,360
‫So right now, it says here, in addition to 30 main posts.

85
00:05:22,200 --> 00:05:26,463
‫So let's add another one and watch what happens.

86
00:05:28,320 --> 00:05:32,130
‫So here, it now says that 31 posts were found,

87
00:05:32,130 --> 00:05:36,090
‫but down here, we still say 30.

88
00:05:36,090 --> 00:05:40,260
‫And so that's because React is still reading this object

89
00:05:40,260 --> 00:05:42,870
‫from the cache, which it didn't update

90
00:05:42,870 --> 00:05:45,990
‫because we didn't place this post variable

91
00:05:45,990 --> 00:05:47,730
‫into the dependency array.

92
00:05:47,730 --> 00:05:51,540
‫And so therefore, this function here was never called again.

93
00:05:51,540 --> 00:05:53,640
‫And so then React is still using

94
00:05:53,640 --> 00:05:57,090
‫the stale value of this post state.

95
00:05:57,090 --> 00:06:00,720
‫So here we are again in the presence of stale state

96
00:06:00,720 --> 00:06:03,090
‫and of a stale closure.

97
00:06:03,090 --> 00:06:05,760
‫So a stale closure because this function here

98
00:06:05,760 --> 00:06:08,550
‫was created initially and from there on,

99
00:06:08,550 --> 00:06:11,700
‫it now remembers all the variables that are referenced

100
00:06:11,700 --> 00:06:14,280
‫inside of it as they were at the time

101
00:06:14,280 --> 00:06:16,320
‫that the function was created.

102
00:06:16,320 --> 00:06:17,790
‫So that's what a closure is,

103
00:06:17,790 --> 00:06:22,260
‫and it is a stale closure because it never run again,

104
00:06:22,260 --> 00:06:26,283
‫and so it is still remembering the old values.

105
00:06:27,420 --> 00:06:30,750
‫So that's one of the weird things about React,

106
00:06:30,750 --> 00:06:33,210
‫which is very confusing for beginners,

107
00:06:33,210 --> 00:06:36,930
‫but that's why I am talking about this time and time again

108
00:06:36,930 --> 00:06:38,940
‫because this is the kind of stuff

109
00:06:38,940 --> 00:06:42,003
‫that you really need in order to master React.

110
00:06:43,290 --> 00:06:48,290
‫But anyway, let's now then place the entire thing here

111
00:06:48,630 --> 00:06:50,580
‫into the dependency array.

112
00:06:50,580 --> 00:06:54,000
‫So not just posts, but really posts.length,

113
00:06:54,000 --> 00:06:57,120
‫which is a lot better because post is an object

114
00:06:57,120 --> 00:07:00,900
‫and this is a primitive, so it's always best

115
00:07:00,900 --> 00:07:03,840
‫to have primitives in the dependency array.

116
00:07:03,840 --> 00:07:06,960
‫And we will learn more about that even later

117
00:07:06,960 --> 00:07:07,953
‫in this section.

118
00:07:09,180 --> 00:07:11,160
‫But anyway, you can see

119
00:07:11,160 --> 00:07:15,240
‫that it actually already updated there to 31.

120
00:07:15,240 --> 00:07:19,083
‫But let's change this again or test this again.

121
00:07:21,570 --> 00:07:24,990
‫So 31 up there and beautiful.

122
00:07:24,990 --> 00:07:27,870
‫Now it updated down here as well.

123
00:07:27,870 --> 00:07:30,300
‫Now, the consequence of this is that,

124
00:07:30,300 --> 00:07:35,220
‫whenever this archive is open, it will then take a long time

125
00:07:35,220 --> 00:07:40,220
‫to re-render the application when we add a new post, right?

126
00:07:41,220 --> 00:07:42,543
‫So let's check that.

127
00:07:43,500 --> 00:07:46,620
‫And now I will just call something very short

128
00:07:46,620 --> 00:07:49,923
‫so that we don't get all those re-renders in the profiler.

129
00:07:51,000 --> 00:07:54,090
‫And then notice how that took some time.

130
00:07:54,090 --> 00:07:56,160
‫And so indeed, we can see that here

131
00:07:56,160 --> 00:07:59,730
‫in this last state update, where now the archive,

132
00:07:59,730 --> 00:08:04,410
‫of course, still had to re-render because now this time,

133
00:08:04,410 --> 00:08:08,670
‫our object here actually has been recreated.

134
00:08:08,670 --> 00:08:11,070
‫So we edit a new post and therefore,

135
00:08:11,070 --> 00:08:16,020
‫posts.length was changed, and so then this object here

136
00:08:16,020 --> 00:08:19,950
‫became a new object, making it so that a prop changed

137
00:08:19,950 --> 00:08:23,280
‫which, in turn, triggered the archive to be re-rendered

138
00:08:23,280 --> 00:08:26,343
‫as a result, even though it is memoized.

139
00:08:27,600 --> 00:08:29,250
‫Okay.

140
00:08:29,250 --> 00:08:32,730
‫So hopefully, all of this made sense, and later on,

141
00:08:32,730 --> 00:08:36,600
‫we will actually see another use case of the useMemo hook.

142
00:08:36,600 --> 00:08:39,903
‫But for now, let's move on to the useCallback hook.