1
00:00:01,140 --> 00:00:03,000
‫Over the next few lectures,

2
00:00:03,000 --> 00:00:06,960
‫we're gonna add three more React tools to your toolbox,

3
00:00:06,960 --> 00:00:09,840
‫the memo function and the use memo,

4
00:00:09,840 --> 00:00:11,613
‫and use callback hooks.

5
00:00:13,110 --> 00:00:14,820
‫Now the fundamental concept

6
00:00:14,820 --> 00:00:18,840
‫behind these three tools is memoization.

7
00:00:18,840 --> 00:00:23,840
‫So that's not memorization, but really memoization.

8
00:00:24,030 --> 00:00:27,630
‫So memoization is an optimization technique

9
00:00:27,630 --> 00:00:31,140
‫that executes a pure function one time,

10
00:00:31,140 --> 00:00:33,210
‫so let's say function A

11
00:00:33,210 --> 00:00:37,020
‫and then it stores the results in memory,

12
00:00:37,020 --> 00:00:38,670
‫so in a cache.

13
00:00:38,670 --> 00:00:41,220
‫Then if we later try to execute

14
00:00:41,220 --> 00:00:42,630
‫the same function again

15
00:00:42,630 --> 00:00:44,370
‫with the same inputs

16
00:00:44,370 --> 00:00:46,530
‫it will simply return the results

17
00:00:46,530 --> 00:00:49,740
‫that was previously stored in the cache.

18
00:00:49,740 --> 00:00:53,100
‫So the function will not be executed again.

19
00:00:53,100 --> 00:00:56,130
‫And that makes a lot of sense, right?

20
00:00:56,130 --> 00:00:59,970
‫So if the arguments are exactly the same as before,

21
00:00:59,970 --> 00:01:02,400
‫it means that in a pure function,

22
00:01:02,400 --> 00:01:04,920
‫the output will be the same.

23
00:01:04,920 --> 00:01:06,870
‫Therefore, it makes no sense

24
00:01:06,870 --> 00:01:09,510
‫to execute the entire code again

25
00:01:09,510 --> 00:01:12,780
‫if we can just read the cached results.

26
00:01:12,780 --> 00:01:13,860
‫On the other hand,

27
00:01:13,860 --> 00:01:15,870
‫if the inputs are different,

28
00:01:15,870 --> 00:01:17,400
‫then of course the function

29
00:01:17,400 --> 00:01:20,280
‫will simply be executed again.

30
00:01:20,280 --> 00:01:23,640
‫So that's the concept of memoization.

31
00:01:23,640 --> 00:01:25,080
‫But you might be wondering

32
00:01:25,080 --> 00:01:28,110
‫what this has to do with React.

33
00:01:28,110 --> 00:01:31,110
‫Well, in React we can use this technique

34
00:01:31,110 --> 00:01:33,720
‫to optimize our applications.

35
00:01:33,720 --> 00:01:37,410
‫So we can use the memo function to memoize components

36
00:01:37,410 --> 00:01:39,480
‫with exactly this principle,

37
00:01:39,480 --> 00:01:41,400
‫and we can use the use memo

38
00:01:41,400 --> 00:01:42,870
‫and use callback hooks

39
00:01:42,870 --> 00:01:45,960
‫to memoize objects and functions.

40
00:01:45,960 --> 00:01:49,740
‫And doing so will help us prevent wasted renders

41
00:01:49,740 --> 00:01:53,220
‫and improve the overall application speed.

42
00:01:53,220 --> 00:01:57,810
‫Okay, so now that we understand what memoization is,

43
00:01:57,810 --> 00:02:00,150
‫in this lecture, it's time to look at

44
00:02:00,150 --> 00:02:03,843
‫how to memoize components using the memo function.

45
00:02:05,490 --> 00:02:08,880
‫So React contains a memo function

46
00:02:08,880 --> 00:02:10,530
‫and we can use this function

47
00:02:10,530 --> 00:02:13,800
‫to create a component that will not re-render

48
00:02:13,800 --> 00:02:15,930
‫when its parent re-renders,

49
00:02:15,930 --> 00:02:20,930
‫as long as the past props stay the same between renders

50
00:02:21,000 --> 00:02:22,470
‫or in other words,

51
00:02:22,470 --> 00:02:26,820
‫we use memo to create a memoized component.

52
00:02:26,820 --> 00:02:28,620
‫And if we think about it,

53
00:02:28,620 --> 00:02:31,440
‫this is exactly the optimization technique

54
00:02:31,440 --> 00:02:34,350
‫that I explained in the previous slide.

55
00:02:34,350 --> 00:02:37,020
‫So the function inputs are props

56
00:02:37,020 --> 00:02:39,180
‫and calling the function multiple times

57
00:02:39,180 --> 00:02:42,510
‫is equivalent to re-rendering in React.

58
00:02:42,510 --> 00:02:45,720
‫And therefore, memoizing a React component

59
00:02:45,720 --> 00:02:47,790
‫means to not re-render it

60
00:02:47,790 --> 00:02:51,120
‫if props stay the same across renderers.

61
00:02:51,120 --> 00:02:54,510
‫And just like with memoizing regular functions,

62
00:02:54,510 --> 00:02:56,430
‫this makes a lot of sense

63
00:02:56,430 --> 00:02:59,040
‫because why re-render the component

64
00:02:59,040 --> 00:03:02,460
‫if the input data hasn't changed at all?

65
00:03:02,460 --> 00:03:05,220
‫Now, the regular behavior in React

66
00:03:05,220 --> 00:03:07,680
‫without using Memo is of course

67
00:03:07,680 --> 00:03:10,380
‫that whenever a component re-renders,

68
00:03:10,380 --> 00:03:13,770
‫the child component re-renders as well.

69
00:03:13,770 --> 00:03:14,910
‫On the other hand,

70
00:03:14,910 --> 00:03:17,250
‫if we memoize the child component,

71
00:03:17,250 --> 00:03:19,860
‫it will not re-render as long

72
00:03:19,860 --> 00:03:21,690
‫as the props are the same

73
00:03:21,690 --> 00:03:24,030
‫as in the previous render.

74
00:03:24,030 --> 00:03:26,580
‫Now, of course, if the props do change,

75
00:03:26,580 --> 00:03:27,810
‫then the child component

76
00:03:27,810 --> 00:03:30,030
‫will need to re-render as well

77
00:03:30,030 --> 00:03:33,453
‫in order to reflect this new data that it received.

78
00:03:34,500 --> 00:03:37,140
‫Now, it's super important to keep in mind

79
00:03:37,140 --> 00:03:41,850
‫that memoizing a component really only affects props.

80
00:03:41,850 --> 00:03:44,130
‫This means that a memoized component

81
00:03:44,130 --> 00:03:48,030
‫will still re-render whenever its own state changes

82
00:03:48,030 --> 00:03:50,940
‫or whenever there is a change in a context

83
00:03:50,940 --> 00:03:53,430
‫that a component is subscribed to.

84
00:03:53,430 --> 00:03:55,650
‫Because in these two situations,

85
00:03:55,650 --> 00:03:58,260
‫the component basically has new data

86
00:03:58,260 --> 00:04:00,360
‫that it needs to show in the UI,

87
00:04:00,360 --> 00:04:02,790
‫and so then it'll always re-render

88
00:04:02,790 --> 00:04:06,570
‫no matter if it's been memoized or not.

89
00:04:06,570 --> 00:04:08,730
‫So from what we just learned,

90
00:04:08,730 --> 00:04:11,550
‫memo sounds great, right?

91
00:04:11,550 --> 00:04:12,870
‫Now, does that mean

92
00:04:12,870 --> 00:04:14,340
‫that we should go ahead

93
00:04:14,340 --> 00:04:17,310
‫and memo all our components?

94
00:04:17,310 --> 00:04:21,390
‫Well, the answer is no, not at all.

95
00:04:21,390 --> 00:04:23,640
‫So memo is only useful

96
00:04:23,640 --> 00:04:26,280
‫when we're dealing with a heavy component,

97
00:04:26,280 --> 00:04:29,520
‫so a component that creates a visible leg

98
00:04:29,520 --> 00:04:32,370
‫or a delay when it's rendered.

99
00:04:32,370 --> 00:04:35,967
‫Also, in order for memo to actually make sense,

100
00:04:35,967 --> 00:04:39,330
‫the component should render quite frequently

101
00:04:39,330 --> 00:04:42,540
‫and it should do so with the same props.

102
00:04:42,540 --> 00:04:45,480
‫And let's analyze why that is.

103
00:04:45,480 --> 00:04:47,460
‫So first, if the props

104
00:04:47,460 --> 00:04:50,100
‫are usually different between re-renders,

105
00:04:50,100 --> 00:04:52,530
‫memo has no effect anyway

106
00:04:52,530 --> 00:04:54,060
‫and then there is absolutely

107
00:04:54,060 --> 00:04:55,950
‫no need to use it.

108
00:04:55,950 --> 00:04:58,650
‫And second, we learned in the first lecture

109
00:04:58,650 --> 00:05:01,080
‫of the section that wasted renders

110
00:05:01,080 --> 00:05:02,940
‫are only a problem when

111
00:05:02,940 --> 00:05:05,910
‫the re-rendering happens too frequently

112
00:05:05,910 --> 00:05:09,240
‫or when the component is slow in rendering.

113
00:05:09,240 --> 00:05:12,090
‫Therefore, if the component only re-renders

114
00:05:12,090 --> 00:05:13,650
‫from time to time

115
00:05:13,650 --> 00:05:15,030
‫or if the component

116
00:05:15,030 --> 00:05:17,760
‫is lightweight and fast anyway,

117
00:05:17,760 --> 00:05:21,450
‫then memoizing brings no benefit at all.

118
00:05:21,450 --> 00:05:24,150
‫Okay, and now it's time to see this

119
00:05:24,150 --> 00:05:26,343
‫in action in the next lecture.