1
00:00:01,080 --> 00:00:02,100
‫We are now ready

2
00:00:02,100 --> 00:00:05,970
‫to finally learn about how exactly React renders

3
00:00:05,970 --> 00:00:08,880
‫our applications behind the scenes.

4
00:00:08,880 --> 00:00:11,220
‫Now there is so much to learn here

5
00:00:11,220 --> 00:00:14,670
‫that I split up this lecture into three parts.

6
00:00:14,670 --> 00:00:17,730
‫So it's this video and the next two ones.

7
00:00:17,730 --> 00:00:20,100
‫This one serves more as an overview

8
00:00:20,100 --> 00:00:21,780
‫and then in the next two videos,

9
00:00:21,780 --> 00:00:23,670
‫we're gonna go really deep

10
00:00:23,670 --> 00:00:25,383
‫into some React internals.

11
00:00:26,850 --> 00:00:29,820
‫And let's start with just a small recap

12
00:00:29,820 --> 00:00:32,340
‫so that we're all on the same page.

13
00:00:32,340 --> 00:00:34,830
‫So as we build our applications,

14
00:00:34,830 --> 00:00:36,090
‫what we're really doing

15
00:00:36,090 --> 00:00:39,030
‫is building a bunch of components.

16
00:00:39,030 --> 00:00:42,600
‫We then use these components inside other components

17
00:00:42,600 --> 00:00:44,790
‫as many times as we want

18
00:00:44,790 --> 00:00:47,220
‫which will cause React to create one

19
00:00:47,220 --> 00:00:51,540
‫or more component instances of each component.

20
00:00:51,540 --> 00:00:52,980
‫So these are basically

21
00:00:52,980 --> 00:00:55,440
‫the actual physical components

22
00:00:55,440 --> 00:00:57,510
‫that live in our application

23
00:00:57,510 --> 00:00:59,403
‫and holds state and props.

24
00:01:00,270 --> 00:01:03,360
‫Now, as React calls each component instance,

25
00:01:03,360 --> 00:01:06,540
‫each JSX will produce a bunch

26
00:01:06,540 --> 00:01:09,960
‫of React dot create element function calls

27
00:01:09,960 --> 00:01:13,650
‫which in turn will produce a React element

28
00:01:13,650 --> 00:01:15,840
‫for each component instance.

29
00:01:15,840 --> 00:01:17,940
‫And so this React element

30
00:01:17,940 --> 00:01:19,890
‫will ultimately be transformed

31
00:01:19,890 --> 00:01:22,350
‫to DOM elements and displayed

32
00:01:22,350 --> 00:01:24,933
‫as a user interface on the screen.

33
00:01:25,860 --> 00:01:28,710
‫So we have a pretty good understanding

34
00:01:28,710 --> 00:01:31,650
‫of the initial part of this process,

35
00:01:31,650 --> 00:01:36,000
‫so of transforming components to React elements.

36
00:01:36,000 --> 00:01:38,760
‫However, what we don't understand yet

37
00:01:38,760 --> 00:01:41,520
‫is the second part of the process,

38
00:01:41,520 --> 00:01:44,940
‫so how these React elements actually end up

39
00:01:44,940 --> 00:01:48,720
‫in the DOM and displayed on the screen.

40
00:01:48,720 --> 00:01:50,610
‫Well, luckily for us,

41
00:01:50,610 --> 00:01:52,830
‫that is exactly what this series

42
00:01:52,830 --> 00:01:55,113
‫of lectures is all about.

43
00:01:56,700 --> 00:01:58,290
‫So in this lecture,

44
00:01:58,290 --> 00:02:00,120
‫we're gonna have a quick overview

45
00:02:00,120 --> 00:02:03,030
‫of each of the phases involved in displaying

46
00:02:03,030 --> 00:02:05,700
‫our components onto the screen.

47
00:02:05,700 --> 00:02:08,700
‫Then we're gonna zoom into each of these phases

48
00:02:08,700 --> 00:02:10,500
‫to learn how the entire process

49
00:02:10,500 --> 00:02:13,053
‫works internally behind the scenes.

50
00:02:14,040 --> 00:02:16,950
‫So this process that we're about to study

51
00:02:16,950 --> 00:02:19,140
‫is started by React each time

52
00:02:19,140 --> 00:02:22,020
‫that a new render is triggered,

53
00:02:22,020 --> 00:02:24,570
‫most of the time by updating state

54
00:02:24,570 --> 00:02:26,970
‫somewhere in the application.

55
00:02:26,970 --> 00:02:29,880
‫So state changes trigger renders

56
00:02:29,880 --> 00:02:31,140
‫and so it makes sense

57
00:02:31,140 --> 00:02:34,620
‫that the next phase is the render phase.

58
00:02:34,620 --> 00:02:38,310
‫In this phase, React calls our component functions

59
00:02:38,310 --> 00:02:41,640
‫and figures out how it should update the DOM,

60
00:02:41,640 --> 00:02:43,320
‫so in order to reflect

61
00:02:43,320 --> 00:02:45,570
‫the latest state changes.

62
00:02:45,570 --> 00:02:47,817
‫However, it does actually not update

63
00:02:47,817 --> 00:02:50,100
‫the DOM in this phase.

64
00:02:50,100 --> 00:02:52,590
‫And so Reacts definition of render

65
00:02:52,590 --> 00:02:54,840
‫is very different from what

66
00:02:54,840 --> 00:02:57,030
‫we usually think of as a render,

67
00:02:57,030 --> 00:02:59,430
‫which can be quite confusing.

68
00:02:59,430 --> 00:03:03,540
‫So again, in React, rendering is not

69
00:03:03,540 --> 00:03:05,190
‫about updating the DOM

70
00:03:05,190 --> 00:03:08,190
‫or displaying elements on the screen.

71
00:03:08,190 --> 00:03:12,240
‫Rendering only happens internally inside of React

72
00:03:12,240 --> 00:03:16,380
‫and so it does not produce any visual changes.

73
00:03:16,380 --> 00:03:18,480
‫Now, in all the previous sections,

74
00:03:18,480 --> 00:03:21,000
‫I have always used the term rendering

75
00:03:21,000 --> 00:03:24,630
‫with the meaning of displaying elements on the screen

76
00:03:24,630 --> 00:03:27,810
‫because that was just easy to understand

77
00:03:27,810 --> 00:03:30,660
‫and it just made sense, right?

78
00:03:30,660 --> 00:03:32,760
‫However, as we just learned,

79
00:03:32,760 --> 00:03:35,220
‫the rendering that I used to mean

80
00:03:35,220 --> 00:03:39,390
‫is really this render plus the next phase.

81
00:03:39,390 --> 00:03:41,910
‫And speaking of that next phase,

82
00:03:41,910 --> 00:03:44,880
‫once React knows how to update a DOM,

83
00:03:44,880 --> 00:03:48,030
‫it does so in the commit phase.

84
00:03:48,030 --> 00:03:49,470
‫So in this phase,

85
00:03:49,470 --> 00:03:52,230
‫new elements might be placed in the DOM

86
00:03:52,230 --> 00:03:55,680
‫and already existing elements might get updated

87
00:03:55,680 --> 00:03:58,590
‫or deleted in order to correctly reflect

88
00:03:58,590 --> 00:04:01,560
‫the current state of the application.

89
00:04:01,560 --> 00:04:05,310
‫So it's really this commit phase that is responsible

90
00:04:05,310 --> 00:04:08,190
‫for what we traditionally call rendering,

91
00:04:08,190 --> 00:04:11,370
‫not the render phase, okay?

92
00:04:11,370 --> 00:04:14,070
‫Then finally, the browser will notice

93
00:04:14,070 --> 00:04:16,230
‫that the DOM has been updated

94
00:04:16,230 --> 00:04:19,020
‫and so it repaints the screen.

95
00:04:19,020 --> 00:04:22,170
‫Now this has nothing to do with React anymore

96
00:04:22,170 --> 00:04:24,150
‫but it's still worth mentioning

97
00:04:24,150 --> 00:04:27,750
‫that it's this final step that actually produces

98
00:04:27,750 --> 00:04:31,353
‫the visual change that users see on their screens.

99
00:04:32,310 --> 00:04:34,860
‫All right, so let's now zoom

100
00:04:34,860 --> 00:04:37,230
‫into each of these different steps,

101
00:04:37,230 --> 00:04:41,130
‫starting with the triggering of a render.

102
00:04:41,130 --> 00:04:43,470
‫So there are only two ways

103
00:04:43,470 --> 00:04:46,110
‫in which a render can be triggered.

104
00:04:46,110 --> 00:04:47,370
‫The first one is

105
00:04:47,370 --> 00:04:50,220
‫the very first time the application runs

106
00:04:50,220 --> 00:04:53,730
‫which is what we call the initial render.

107
00:04:53,730 --> 00:04:57,210
‫And the second one is a state update happening

108
00:04:57,210 --> 00:04:59,880
‫in one or more component instances

109
00:04:59,880 --> 00:05:01,920
‫somewhere in the application

110
00:05:01,920 --> 00:05:05,310
‫which is what we call a re-render.

111
00:05:05,310 --> 00:05:06,930
‫And it's important to note

112
00:05:06,930 --> 00:05:09,780
‫that the render process really is triggered

113
00:05:09,780 --> 00:05:12,000
‫for the entire application,

114
00:05:12,000 --> 00:05:15,180
‫not just for one single component.

115
00:05:15,180 --> 00:05:16,560
‫Now that doesn't mean

116
00:05:16,560 --> 00:05:19,110
‫that the entire DOM is updated

117
00:05:19,110 --> 00:05:21,330
‫because remember, in React,

118
00:05:21,330 --> 00:05:25,140
‫rendering is only about calling the component functions

119
00:05:25,140 --> 00:05:28,953
‫and figuring out what needs to change in the DOM later.

120
00:05:29,850 --> 00:05:32,910
‫Now again, this might seem confusing now

121
00:05:32,910 --> 00:05:34,740
‫because earlier in the course,

122
00:05:34,740 --> 00:05:36,900
‫I made it seem as though React

123
00:05:36,900 --> 00:05:39,570
‫only re-renders the component

124
00:05:39,570 --> 00:05:41,880
‫where the state update happened.

125
00:05:41,880 --> 00:05:43,680
‫But that's because we were learning

126
00:05:43,680 --> 00:05:46,230
‫how React works in practice.

127
00:05:46,230 --> 00:05:50,520
‫And in fact, when we look at what happens in practice,

128
00:05:50,520 --> 00:05:52,110
‫it looks as if only

129
00:05:52,110 --> 00:05:55,290
‫the updated component is re-rendered.

130
00:05:55,290 --> 00:05:56,760
‫But now we are learning

131
00:05:56,760 --> 00:05:59,580
‫how React actually works behind the scenes.

132
00:05:59,580 --> 00:06:02,430
‫And so now we know that React looks

133
00:06:02,430 --> 00:06:06,420
‫at the entire tree whenever a render happens.

134
00:06:06,420 --> 00:06:08,370
‫Finally, I just want to mention

135
00:06:08,370 --> 00:06:12,150
‫that a render is actually not triggered immediately

136
00:06:12,150 --> 00:06:14,700
‫after a state update happens.

137
00:06:14,700 --> 00:06:17,190
‫Instead, it's scheduled for when

138
00:06:17,190 --> 00:06:19,290
‫the JavaScript engine basically

139
00:06:19,290 --> 00:06:22,260
‫has some free time on its hands.

140
00:06:22,260 --> 00:06:23,940
‫But this difference is usually

141
00:06:23,940 --> 00:06:25,590
‫just a few milliseconds

142
00:06:25,590 --> 00:06:27,540
‫that we won't notice.

143
00:06:27,540 --> 00:06:29,220
‫There are also some situations

144
00:06:29,220 --> 00:06:31,380
‫like multiple sets state calls

145
00:06:31,380 --> 00:06:35,070
‫in the same function where renders will be batched

146
00:06:35,070 --> 00:06:37,980
‫as we will explore a bit later.

147
00:06:37,980 --> 00:06:41,130
‫So this is how renders are triggered

148
00:06:41,130 --> 00:06:43,290
‫which is the easy part.

149
00:06:43,290 --> 00:06:45,990
‫What follows is the hard part,

150
00:06:45,990 --> 00:06:48,480
‫which is the actual rendering.

151
00:06:48,480 --> 00:06:51,903
‫And so let's learn all about that in the next video.