1
00:00:01,110 --> 00:00:02,640
‫We're gonna start this section

2
00:00:02,640 --> 00:00:04,247
‫by getting a quick overview

3
00:00:04,247 --> 00:00:06,760
‫of what can actually be optimized

4
00:00:06,760 --> 00:00:10,803
‫in React applications and how we can do it.

5
00:00:12,030 --> 00:00:15,330
‫So, there are three main areas that we can focus on

6
00:00:15,330 --> 00:00:19,350
‫when we need to optimize performance of React apps.

7
00:00:19,350 --> 00:00:22,980
‫First, we can try to prevent wasted renders.

8
00:00:22,980 --> 00:00:26,010
‫Second, we can improve the overall app speed

9
00:00:26,010 --> 00:00:27,850
‫and responsiveness to make sure

10
00:00:27,850 --> 00:00:32,460
‫that the app is 100% fluid and without delays.

11
00:00:32,460 --> 00:00:36,630
‫And third, we can reduce the bundle size.

12
00:00:36,630 --> 00:00:39,210
‫So, let's quickly look at some built

13
00:00:39,210 --> 00:00:43,020
‫in React tools for each of these areas.

14
00:00:43,020 --> 00:00:45,960
‫So in order to prevent wasted renders,

15
00:00:45,960 --> 00:00:48,528
‫we can memorize components with memo

16
00:00:48,528 --> 00:00:50,577
‫or we can memorize objects

17
00:00:50,577 --> 00:00:55,530
‫and functions with useMemo and useCallback hooks.

18
00:00:55,530 --> 00:00:58,290
‫And of course, you don't know what any

19
00:00:58,290 --> 00:00:59,818
‫of this means at this point

20
00:00:59,818 --> 00:01:03,930
‫but we'll get to it over the next few lectures.

21
00:01:03,930 --> 00:01:06,659
‫We can also use a technique where we pass elements

22
00:01:06,659 --> 00:01:11,118
‫into other elements as children or as a normal prop

23
00:01:11,118 --> 00:01:14,103
‫in order to prevent them from being re-rendered.

24
00:01:15,060 --> 00:01:17,880
‫Now to improve the perceived up speed,

25
00:01:17,880 --> 00:01:21,810
‫we can again use the use memo and use callback hooks

26
00:01:21,810 --> 00:01:25,980
‫and we can also use the modern useTransition hook net.

27
00:01:25,980 --> 00:01:28,293
‫Again, more about these later.

28
00:01:29,130 --> 00:01:32,160
‫Finally, we can reduce the bundle size simply

29
00:01:32,160 --> 00:01:35,790
‫by using fewer third-party packages in our code base

30
00:01:35,790 --> 00:01:40,443
‫and we can also implement code splitting and lazy loading.

31
00:01:41,310 --> 00:01:43,931
‫Now there is no need to use all these tools

32
00:01:43,931 --> 00:01:46,740
‫and techniques all the time.

33
00:01:46,740 --> 00:01:48,030
‫So, the main goal

34
00:01:48,030 --> 00:01:51,990
‫of this section is to basically just give you access

35
00:01:51,990 --> 00:01:54,311
‫to these tools so that you can have them

36
00:01:54,311 --> 00:01:59,130
‫in your toolbox whenever a situation calls for one of them.

37
00:01:59,130 --> 00:02:00,900
‫And throughout this section,

38
00:02:00,900 --> 00:02:03,840
‫you will learn exactly when that is.

39
00:02:03,840 --> 00:02:08,430
‫So in which situations you need each of these tools.

40
00:02:08,430 --> 00:02:10,562
‫Also, keep in mind that this list

41
00:02:10,562 --> 00:02:14,629
‫of tools and techniques is by no means exhaustive.

42
00:02:14,629 --> 00:02:18,150
‫So there are many other optimization best practices

43
00:02:18,150 --> 00:02:19,200
‫that I already told you

44
00:02:19,200 --> 00:02:22,953
‫about before and that you are already using, for example,

45
00:02:22,953 --> 00:02:26,940
‫not defining components inside other components.

46
00:02:26,940 --> 00:02:30,750
‫And so I didn't include all of these in this list.

47
00:02:30,750 --> 00:02:33,120
‫So, these are mainly tools that we will talk about

48
00:02:33,120 --> 00:02:35,945
‫in this or in future sections.

49
00:02:35,945 --> 00:02:38,250
‫Now the first part

50
00:02:38,250 --> 00:02:42,705
‫of this section is gonna be about optimizing wasted renders.

51
00:02:42,705 --> 00:02:47,340
‫However, to understand what wasted renders actually are,

52
00:02:47,340 --> 00:02:51,600
‫we first need to review when exactly a component instance

53
00:02:51,600 --> 00:02:53,490
‫gets re-rendered.

54
00:02:53,490 --> 00:02:55,605
‫So, this will serve as a nice reminder

55
00:02:55,605 --> 00:02:58,931
‫of how rendering works in practice.

56
00:02:58,931 --> 00:03:03,720
‫So in React, a component instance only gets re-rendered

57
00:03:03,720 --> 00:03:05,842
‫in three different situations.

58
00:03:05,842 --> 00:03:09,480
‫First, when the component state changes.

59
00:03:09,480 --> 00:03:12,660
‫Second, a component instance gets re-rendered

60
00:03:12,660 --> 00:03:15,450
‫whenever there's a change in a context

61
00:03:15,450 --> 00:03:18,300
‫that the component is subscribed to.

62
00:03:18,300 --> 00:03:20,512
‫And this is exactly what we've learned

63
00:03:20,512 --> 00:03:22,620
‫in the previous section.

64
00:03:22,620 --> 00:03:25,500
‫And finally, as we learned in the section

65
00:03:25,500 --> 00:03:28,221
‫on how React works behind the scenes, whenever

66
00:03:28,221 --> 00:03:32,010
‫a component re-renders, all its child components

67
00:03:32,010 --> 00:03:35,280
‫will automatically be re-rendered as well.

68
00:03:35,280 --> 00:03:37,620
‫And so the third reason for a component

69
00:03:37,620 --> 00:03:41,801
‫to re-render is a parent component re-rendering.

70
00:03:41,801 --> 00:03:46,020
‫But now, you might be wondering what about prop changes?

71
00:03:46,020 --> 00:03:50,040
‫Doesn't updating props also re-render a component?

72
00:03:50,040 --> 00:03:54,150
‫Well, actually, that's technically not the case.

73
00:03:54,150 --> 00:03:56,550
‫So, that's a common misconception.

74
00:03:56,550 --> 00:03:59,190
‫And actually even I told you this

75
00:03:59,190 --> 00:04:01,860
‫at the beginning of the course, but it was only

76
00:04:01,860 --> 00:04:05,460
‫because you didn't know yet how rendering works.

77
00:04:05,460 --> 00:04:08,188
‫Because it is true that it does look

78
00:04:08,188 --> 00:04:12,450
‫as if components re-render when their props change.

79
00:04:12,450 --> 00:04:15,987
‫But what actually happens is that props only change

80
00:04:15,987 --> 00:04:18,120
‫when the parent re-renders

81
00:04:18,120 --> 00:04:19,950
‫but when the parent re-renders,

82
00:04:19,950 --> 00:04:23,760
‫the children who receives the prop will re-render anyway.

83
00:04:23,760 --> 00:04:27,060
‫And so, the real reason why a component re-renders

84
00:04:27,060 --> 00:04:31,451
‫when props change is that the parent has re-rendered.

85
00:04:31,451 --> 00:04:32,970
‫Okay.

86
00:04:32,970 --> 00:04:36,390
‫But anyway, it's important to also remember

87
00:04:36,390 --> 00:04:39,450
‫that rendering a component does not mean

88
00:04:39,450 --> 00:04:42,440
‫that the DOM actually gets updated, right?

89
00:04:42,440 --> 00:04:45,510
‫So all that rendering means is

90
00:04:45,510 --> 00:04:47,970
‫that the component function gets called

91
00:04:47,970 --> 00:04:51,270
‫and that React will create a new virtual DOM

92
00:04:51,270 --> 00:04:52,680
‫and to all the differing

93
00:04:52,680 --> 00:04:56,640
‫and reconciliation that we have already talked about before.

94
00:04:56,640 --> 00:05:00,330
‫And this can be an expensive and wasteful operation

95
00:05:00,330 --> 00:05:02,283
‫which brings us to an important topic

96
00:05:02,283 --> 00:05:06,420
‫of this video, wasted renders.

97
00:05:06,420 --> 00:05:09,690
‫So, a wasted render is basically a render

98
00:05:09,690 --> 00:05:13,200
‫that didn't produce any change in the DOM.

99
00:05:13,200 --> 00:05:16,740
‫So, it's a waste because all the different calculations

100
00:05:16,740 --> 00:05:18,059
‫still had to be done

101
00:05:18,059 --> 00:05:21,630
‫but it didn't result in any new DOM.

102
00:05:21,630 --> 00:05:25,473
‫And so therefore, all the calculations were for nothing.

103
00:05:26,340 --> 00:05:30,570
‫Now, most of the time, this is actually no problem at all

104
00:05:30,570 --> 00:05:33,360
‫because React is very fast.

105
00:05:33,360 --> 00:05:36,600
‫However, it can become a problem when re-renders

106
00:05:36,600 --> 00:05:38,790
‫happen way too frequently

107
00:05:38,790 --> 00:05:42,330
‫or when the component is very slow in rendering.

108
00:05:42,330 --> 00:05:45,780
‫And so, this can then make the application feel leggy

109
00:05:45,780 --> 00:05:47,490
‫and unresponsive.

110
00:05:47,490 --> 00:05:50,448
‫For example, not updating the UI fast enough

111
00:05:50,448 --> 00:05:53,790
‫after the user performs a certain action.

112
00:05:53,790 --> 00:05:57,843
‫So, we want to avoid situations like that at all costs.

113
00:05:58,980 --> 00:06:01,830
‫So, that's basically what we're gonna be dealing with

114
00:06:01,830 --> 00:06:03,633
‫in the next couple of videos.