1
00:00:01,231 --> 00:00:04,740
‫All right, so let's move back to our project,

2
00:00:04,740 --> 00:00:08,820
‫and see how React batches state updates in practice

3
00:00:08,820 --> 00:00:13,593
‫and how this state updating is in fact asynchronous.

4
00:00:15,030 --> 00:00:19,050
‫So let's come down here to our TabContent component,

5
00:00:19,050 --> 00:00:22,200
‫and then let's play around a little bit with the states

6
00:00:22,200 --> 00:00:23,580
‫that we have here.

7
00:00:23,580 --> 00:00:27,810
‫And first of all, I want to now implement the functionality

8
00:00:27,810 --> 00:00:30,090
‫of this undo button here.

9
00:00:30,090 --> 00:00:32,730
‫So this undo will basically undo

10
00:00:32,730 --> 00:00:35,970
‫or reset the two states that we have here.

11
00:00:35,970 --> 00:00:38,523
‫So this one, and this one.

12
00:00:41,340 --> 00:00:45,243
‫So let's write a simple function handleUndo.

13
00:00:47,982 --> 00:00:52,227
‫And then what it does is setShowDetails back to true,

14
00:00:54,450 --> 00:00:57,633
‫and set the likes back to zero.

15
00:00:58,860 --> 00:01:03,860
‫And then let's use that handler right here.

16
00:01:05,520 --> 00:01:09,360
‫So easy enough, handleUndo.

17
00:01:09,360 --> 00:01:12,723
‫And yeah, that works great.

18
00:01:13,680 --> 00:01:16,800
‫So as we just learned in the previous lecture,

19
00:01:16,800 --> 00:01:20,700
‫inside of this event handler function here,

20
00:01:20,700 --> 00:01:23,370
‫these two state updates are batched.

21
00:01:23,370 --> 00:01:27,420
‫So they will only cause one component re-render.

22
00:01:27,420 --> 00:01:30,480
‫Now how can we actually prove that?

23
00:01:30,480 --> 00:01:34,740
‫Well, one simple way is to lock something

24
00:01:34,740 --> 00:01:35,763
‫to the console here.

25
00:01:37,020 --> 00:01:39,000
‫So let's say render.

26
00:01:39,000 --> 00:01:42,660
‫And so then each time that the component gets re-rendered,

27
00:01:42,660 --> 00:01:47,340
‫and so then each time this console.log will log render

28
00:01:47,340 --> 00:01:48,363
‫to the console.

29
00:01:49,770 --> 00:01:51,450
‫So let's see.

30
00:01:51,450 --> 00:01:55,203
‫Let's first get rid of these other ones that we had here.

31
00:01:57,840 --> 00:02:01,350
‫So here there are, and okay.

32
00:02:05,670 --> 00:02:09,360
‫Now nevermind this one here that is a bit more grayed out.

33
00:02:09,360 --> 00:02:11,490
‫This is coming from somewhere else.

34
00:02:11,490 --> 00:02:14,730
‫So only this one render here is important.

35
00:02:14,730 --> 00:02:16,770
‫So this first render string here

36
00:02:16,770 --> 00:02:20,580
‫comes from the initial render of this TabContent component.

37
00:02:20,580 --> 00:02:24,240
‫And if we go to another tab, then we get another one,

38
00:02:24,240 --> 00:02:28,383
‫because of course, then this component here is updated.

39
00:02:29,790 --> 00:02:30,660
‫Now, okay.

40
00:02:30,660 --> 00:02:33,573
‫Now let's remove this, so that we start empty,

41
00:02:34,470 --> 00:02:36,273
‫or actually we will see a few more.

42
00:02:37,290 --> 00:02:38,700
‫So each time that we click here,

43
00:02:38,700 --> 00:02:40,890
‫the component function gets rendered,

44
00:02:40,890 --> 00:02:44,070
‫and so then the console.log is executed.

45
00:02:44,070 --> 00:02:46,920
‫And so this is actually a really nice way of proving

46
00:02:46,920 --> 00:02:49,953
‫that rendering is calling the component function.

47
00:02:51,570 --> 00:02:53,220
‫Now, all right?

48
00:02:53,220 --> 00:02:54,660
‫But now let's empty this.

49
00:02:54,660 --> 00:02:56,820
‫And then as I click this button here,

50
00:02:56,820 --> 00:02:59,580
‫we should only see one render here,

51
00:02:59,580 --> 00:03:02,850
‫which would then mean that these two state updates

52
00:03:02,850 --> 00:03:03,753
‫were batched.

53
00:03:04,620 --> 00:03:05,850
‫So let's see.

54
00:03:05,850 --> 00:03:08,760
‫And indeed, we only get one here.

55
00:03:08,760 --> 00:03:10,290
‫Great.

56
00:03:10,290 --> 00:03:15,243
‫Now let's also see that the state updating is asynchronous.

57
00:03:16,440 --> 00:03:20,430
‫So basically, if I try to access the number of likes here

58
00:03:20,430 --> 00:03:25,430
‫right after updating the state, then what happens?

59
00:03:26,640 --> 00:03:29,700
‫So first I need to of course increase a little bit,

60
00:03:29,700 --> 00:03:31,290
‫then let's clean this.

61
00:03:31,290 --> 00:03:35,700
‫And as I reset, well, we get five,

62
00:03:35,700 --> 00:03:37,740
‫which might be surprising.

63
00:03:37,740 --> 00:03:41,550
‫But if you paid good attention in the previous lecture,

64
00:03:41,550 --> 00:03:46,260
‫then this will actually no longer come as a surprise to you.

65
00:03:46,260 --> 00:03:50,550
‫So the reason that here we get five is that the state

66
00:03:50,550 --> 00:03:55,350
‫is in fact actually only updated after the re-rendering,

67
00:03:55,350 --> 00:03:58,080
‫or basically during the re-rendering,

68
00:03:58,080 --> 00:04:02,310
‫but not immediately after we call dysfunction.

69
00:04:02,310 --> 00:04:03,930
‫So that's impossible.

70
00:04:03,930 --> 00:04:08,760
‫And therefore, here we still get that old likes state,

71
00:04:08,760 --> 00:04:11,340
‫which again is still at five.

72
00:04:11,340 --> 00:04:13,560
‫Then now it is of course at zero,

73
00:04:13,560 --> 00:04:17,250
‫because now the re-rendering has already happened.

74
00:04:17,250 --> 00:04:20,700
‫Now, by the way, what do you think will happen,

75
00:04:20,700 --> 00:04:22,770
‫so what do you think will get rendered

76
00:04:22,770 --> 00:04:25,113
‫if we click the undo button again?

77
00:04:25,980 --> 00:04:27,660
‫So let's clear this.

78
00:04:27,660 --> 00:04:29,670
‫And so let's see what happens.

79
00:04:29,670 --> 00:04:34,670
‫So I click this now, and you see that no render

80
00:04:35,070 --> 00:04:37,260
‫was logged to the console.

81
00:04:37,260 --> 00:04:39,270
‫So why do you think that is?

82
00:04:39,270 --> 00:04:43,890
‫Why was the component instance not re-rendered this time?

83
00:04:43,890 --> 00:04:47,010
‫Well, it's because both of the state values

84
00:04:47,010 --> 00:04:50,460
‫were already at their default basically.

85
00:04:50,460 --> 00:04:54,930
‫So details was already true and likes was already zero.

86
00:04:54,930 --> 00:04:58,290
‫And so then as we attempted to update the state,

87
00:04:58,290 --> 00:05:01,290
‫both of them were actually not updated.

88
00:05:01,290 --> 00:05:03,600
‫And again, that's because the new state

89
00:05:03,600 --> 00:05:05,820
‫was equal to the current state.

90
00:05:05,820 --> 00:05:07,350
‫And so in that situation,

91
00:05:07,350 --> 00:05:11,430
‫React will not even try to attempt to update the state,

92
00:05:11,430 --> 00:05:14,550
‫and then of course, it will also not re-render

93
00:05:14,550 --> 00:05:16,140
‫the component instance.

94
00:05:16,140 --> 00:05:19,113
‫And so that's why, well, nothing happens.

95
00:05:20,310 --> 00:05:22,530
‫So as we keep clicking here, of course,

96
00:05:22,530 --> 00:05:25,530
‫the console.log keeps getting executed,

97
00:05:25,530 --> 00:05:29,463
‫but again, the component itself is not re-rendered.

98
00:05:30,330 --> 00:05:32,640
‫Okay, but let's move on here,

99
00:05:32,640 --> 00:05:36,240
‫and let's implement this next button here.

100
00:05:36,240 --> 00:05:38,580
‫So here I have these three pluses,

101
00:05:38,580 --> 00:05:40,740
‫which means that when I click here,

102
00:05:40,740 --> 00:05:43,860
‫I actually want like a super like,

103
00:05:43,860 --> 00:05:46,173
‫so this should then improve by three.

104
00:05:47,100 --> 00:05:49,140
‫So let's create a function for that.

105
00:05:49,140 --> 00:05:50,793
‫And I will just copy this one.

106
00:05:52,020 --> 00:05:54,063
‫And let's call it TripleInc.

107
00:05:57,090 --> 00:05:59,553
‫And then I'll just duplicate this here.

108
00:06:00,540 --> 00:06:03,603
‫And then let's come down here,

109
00:06:04,997 --> 00:06:09,843
‫onClick and then handleTripleInc.

110
00:06:11,940 --> 00:06:13,890
‫Okay, let's go back to our function,

111
00:06:13,890 --> 00:06:16,413
‫because this will become very important.

112
00:06:17,520 --> 00:06:20,310
‫So what do you think is going to happen

113
00:06:20,310 --> 00:06:22,053
‫when I click here now?

114
00:06:22,890 --> 00:06:24,510
‫Again, let's close.

115
00:06:24,510 --> 00:06:26,100
‫So what do you think will happen

116
00:06:26,100 --> 00:06:28,293
‫to the state here in particular?

117
00:06:29,130 --> 00:06:30,393
‫So let's see.

118
00:06:31,350 --> 00:06:35,490
‫And well, it only increased once,

119
00:06:35,490 --> 00:06:39,210
‫so not three times as we might expect.

120
00:06:39,210 --> 00:06:41,880
‫But were we actually really expecting

121
00:06:41,880 --> 00:06:44,490
‫that it would increase three times?

122
00:06:44,490 --> 00:06:46,560
‫I mean with what we already know,

123
00:06:46,560 --> 00:06:51,000
‫we should know that this here could never work.

124
00:06:51,000 --> 00:06:52,953
‫So let's see why that is.

125
00:06:53,970 --> 00:06:56,880
‫So right here at the beginning of dysfunction

126
00:06:56,880 --> 00:07:00,180
‫likes was zero, right?

127
00:07:00,180 --> 00:07:02,910
‫And so then here, setLikes would be zero

128
00:07:02,910 --> 00:07:06,030
‫plus 1 equals 1, right?

129
00:07:06,030 --> 00:07:10,650
‫So this one is pretty clear, but then what in the next line?

130
00:07:10,650 --> 00:07:14,220
‫So what is the value of likes here in this line?

131
00:07:14,220 --> 00:07:17,520
‫Well, it is actually still zero.

132
00:07:17,520 --> 00:07:20,010
‫And so that's because the state update

133
00:07:20,010 --> 00:07:23,250
‫is once again, asynchronous.

134
00:07:23,250 --> 00:07:26,610
‫So we do not get access to the new state value

135
00:07:26,610 --> 00:07:28,770
‫after this line of code right here.

136
00:07:28,770 --> 00:07:32,280
‫And so this is exactly what happens down here.

137
00:07:32,280 --> 00:07:35,340
‫So here, the state is now stale,

138
00:07:35,340 --> 00:07:38,133
‫so as we learned in the previous lecture as well.

139
00:07:39,060 --> 00:07:41,970
‫So we can very easily see that here again

140
00:07:41,970 --> 00:07:43,383
‫with this console.log.

141
00:07:45,720 --> 00:07:49,770
‫So if I click again, and actually I want the other one.

142
00:07:49,770 --> 00:07:54,120
‫So this one here, well then you see that it became two,

143
00:07:54,120 --> 00:07:57,300
‫which is exactly the value that we had before.

144
00:07:57,300 --> 00:08:01,170
‫And so here it was 2 plus 1 made this new 3.

145
00:08:01,170 --> 00:08:03,930
‫But here, it was still 2, and here as well,

146
00:08:03,930 --> 00:08:05,490
‫and here as well.

147
00:08:05,490 --> 00:08:07,590
‫So how could we make this work

148
00:08:07,590 --> 00:08:09,810
‫if we really wanted to update the state

149
00:08:09,810 --> 00:08:12,150
‫three times like here?

150
00:08:12,150 --> 00:08:15,060
‫I mean, of course, we could just do this,

151
00:08:15,060 --> 00:08:17,100
‫but this is not the point here.

152
00:08:17,100 --> 00:08:20,670
‫So we are trying to learn how we could do this right here

153
00:08:20,670 --> 00:08:21,633
‫in another way.

154
00:08:22,500 --> 00:08:26,580
‫So actually, we have been doing that all along.

155
00:08:26,580 --> 00:08:30,120
‫So all the time, whenever we were updating state

156
00:08:30,120 --> 00:08:32,070
‫based on the current state,

157
00:08:32,070 --> 00:08:36,510
‫we would use a callback function instead of just a value.

158
00:08:36,510 --> 00:08:39,780
‫So we also talked about that in the previous lecture.

159
00:08:39,780 --> 00:08:43,110
‫And so now the time came where we really learn

160
00:08:43,110 --> 00:08:46,110
‫why we have been doing it with the callback function

161
00:08:46,110 --> 00:08:47,223
‫all the time.

162
00:08:48,840 --> 00:08:53,840
‫So let's remove this here or comment it out.

163
00:08:55,890 --> 00:08:57,813
‫And then let's do it the right way.

164
00:08:58,920 --> 00:09:02,220
‫So setLikes, and now we pass in the callback function.

165
00:09:02,220 --> 00:09:04,200
‫And then as you already know,

166
00:09:04,200 --> 00:09:08,100
‫the first argument here is the current value of the state,

167
00:09:08,100 --> 00:09:10,293
‫and then we just return the new one.

168
00:09:11,430 --> 00:09:14,733
‫And again here, likes could be called anything.

169
00:09:16,020 --> 00:09:21,020
‫Okay, let's do this three times, and then let's reload.

170
00:09:22,380 --> 00:09:26,970
‫And now, yeah, now it works.

171
00:09:26,970 --> 00:09:29,580
‫So this is the trick that changes the way

172
00:09:29,580 --> 00:09:31,470
‫this state is updated.

173
00:09:31,470 --> 00:09:33,120
‫So here in the callback function,

174
00:09:33,120 --> 00:09:38,120
‫we do actually get access to the latest updated state.

175
00:09:38,340 --> 00:09:42,270
‫So initially likes was zero, and then it returned 1.

176
00:09:42,270 --> 00:09:44,910
‫And so then in the next call here,

177
00:09:44,910 --> 00:09:48,030
‫this likes in this callback function will be 1.

178
00:09:48,030 --> 00:09:49,410
‫And so then we can update it

179
00:09:49,410 --> 00:09:52,860
‫to another one, and to another one.

180
00:09:52,860 --> 00:09:54,420
‫Beautiful.

181
00:09:54,420 --> 00:09:57,270
‫And so this is the reason why I've been telling you

182
00:09:57,270 --> 00:10:01,840
‫that each time that we set state based on the previous state

183
00:10:01,840 --> 00:10:04,050
‫or based on the current state,

184
00:10:04,050 --> 00:10:07,500
‫we should always, always use a callback function

185
00:10:07,500 --> 00:10:08,793
‫like this here.

186
00:10:09,750 --> 00:10:13,830
‫Now you might be wondering like why should we do that here?

187
00:10:13,830 --> 00:10:17,520
‫I mean, it works perfectly fine, right?

188
00:10:17,520 --> 00:10:18,990
‫And you're right about that.

189
00:10:18,990 --> 00:10:20,880
‫It works perfectly fine,

190
00:10:20,880 --> 00:10:23,250
‫but we never know what other developers

191
00:10:23,250 --> 00:10:25,170
‫might do with our functions,

192
00:10:25,170 --> 00:10:28,800
‫or even what we might do later ourselves.

193
00:10:28,800 --> 00:10:30,120
‫So let's say that at some point,

194
00:10:30,120 --> 00:10:32,430
‫we want to change how this function works,

195
00:10:32,430 --> 00:10:36,270
‫and then without thinking about it, we just do this.

196
00:10:36,270 --> 00:10:40,800
‫And so then we go back to this not working as expected.

197
00:10:40,800 --> 00:10:43,350
‫So now we want to increase the likes by 2,

198
00:10:43,350 --> 00:10:47,790
‫but it will still only increase by 1, right?

199
00:10:47,790 --> 00:10:52,790
‫Or another situation, maybe, let's comment this one out.

200
00:10:53,670 --> 00:10:55,500
‫So maybe, here we could think

201
00:10:55,500 --> 00:10:58,713
‫that we could just call this function here three times.

202
00:11:02,010 --> 00:11:05,310
‫Or maybe some other developer might think that.

203
00:11:05,310 --> 00:11:08,250
‫And so then they would get surprised when they see

204
00:11:08,250 --> 00:11:11,910
‫that this is actually not working, right?

205
00:11:11,910 --> 00:11:14,760
‫And so again, you should always,

206
00:11:14,760 --> 00:11:16,890
‫always use the callback function,

207
00:11:16,890 --> 00:11:20,310
‫because then you are always safe for whatever change

208
00:11:20,310 --> 00:11:22,683
‫your code goes through in the future.

209
00:11:25,950 --> 00:11:29,130
‫So with this, it will now work,

210
00:11:29,130 --> 00:11:34,083
‫but of course, we need to write the correct variable name.

211
00:11:35,520 --> 00:11:39,480
‫So yeah, now it does work.

212
00:11:39,480 --> 00:11:42,450
‫So even if you then use the function somewhere else,

213
00:11:42,450 --> 00:11:46,740
‫by doing this, you are safeguarded about well,

214
00:11:46,740 --> 00:11:49,683
‫any changes that might occur in the future.

215
00:11:52,020 --> 00:11:53,550
‫All right.

216
00:11:53,550 --> 00:11:55,620
‫And now to finish, let's just prove

217
00:11:55,620 --> 00:11:59,430
‫that automatic batching now works in React 18

218
00:11:59,430 --> 00:12:02,880
‫even outside of event handlers.

219
00:12:02,880 --> 00:12:06,870
‫So here we have this button that should undo,

220
00:12:06,870 --> 00:12:11,130
‫so it should reset our state two seconds later.

221
00:12:11,130 --> 00:12:13,500
‫Well, that's easy enough.

222
00:12:13,500 --> 00:12:18,500
‫Let's just create a function called handleUndoLater.

223
00:12:23,250 --> 00:12:27,660
‫And this function will simply set a timeout,

224
00:12:27,660 --> 00:12:31,683
‫and then after two seconds, it'll call handleUndo.

225
00:12:33,210 --> 00:12:35,790
‫So after 2000 milliseconds.

226
00:12:35,790 --> 00:12:37,980
‫And so what this will do is to schedule

227
00:12:37,980 --> 00:12:42,300
‫this handleUndo function to be executed two seconds

228
00:12:42,300 --> 00:12:45,420
‫after this function here was called.

229
00:12:45,420 --> 00:12:49,140
‫And so then, handleUndo is no longer really

230
00:12:49,140 --> 00:12:50,790
‫an event handler function.

231
00:12:50,790 --> 00:12:54,030
‫It's just any function that simply gets called

232
00:12:54,030 --> 00:12:55,890
‫at a later time.

233
00:12:55,890 --> 00:12:58,113
‫So that's just what setTimeout does.

234
00:12:59,790 --> 00:13:04,790
‫So let's then wire that up here with the onClick prop.

235
00:13:05,850 --> 00:13:06,813
‫So handleUndoLater.

236
00:13:10,170 --> 00:13:11,013
‫All right.

237
00:13:12,540 --> 00:13:15,123
‫Let's just then set our state.

238
00:13:16,050 --> 00:13:17,640
‫Let's clean up here.

239
00:13:17,640 --> 00:13:21,120
‫And then I just clicked, and let's wait.

240
00:13:21,120 --> 00:13:25,320
‫And indeed, two seconds later, our state was updated.

241
00:13:25,320 --> 00:13:29,520
‫And indeed, our component was only rendered once,

242
00:13:29,520 --> 00:13:34,110
‫which is proved here by this single render string.

243
00:13:34,110 --> 00:13:35,280
‫Great.

244
00:13:35,280 --> 00:13:39,180
‫So again, this proves that in React 18

245
00:13:39,180 --> 00:13:42,450
‫batching happens not only inside event handlers,

246
00:13:42,450 --> 00:13:45,300
‫but also inside a set timeout.

247
00:13:45,300 --> 00:13:49,710
‫And the same is true for promises and other situations.

248
00:13:49,710 --> 00:13:51,750
‫Now, just to really make sure,

249
00:13:51,750 --> 00:13:53,070
‫and you don't have to do this,

250
00:13:53,070 --> 00:13:56,430
‫but I like to play around with this stuff.

251
00:13:56,430 --> 00:14:00,993
‫So what I want to do now is to render this using React 17.

252
00:14:01,890 --> 00:14:06,203
‫So I will comment this one out, and comment this one, okay?

253
00:14:08,067 --> 00:14:11,910
‫And then here we need to also change here from here.

254
00:14:11,910 --> 00:14:13,800
‫And so now this is basically back

255
00:14:13,800 --> 00:14:16,890
‫to being a React 17 application.

256
00:14:16,890 --> 00:14:19,530
‫And that's exactly what it says here in this warning.

257
00:14:19,530 --> 00:14:21,780
‫So until you switch to the new API,

258
00:14:21,780 --> 00:14:25,830
‫your app will behave as if it's running React 17.

259
00:14:25,830 --> 00:14:28,623
‫But right now, that's actually exactly what we want.

260
00:14:30,030 --> 00:14:32,973
‫So now we get some error here, but yeah.

261
00:14:34,380 --> 00:14:37,350
‫So let's do some state updating here.

262
00:14:37,350 --> 00:14:39,750
‫Then I will clean and watch what happens

263
00:14:39,750 --> 00:14:42,300
‫when I click this button now.

264
00:14:42,300 --> 00:14:43,560
‫So let's wait.

265
00:14:43,560 --> 00:14:47,460
‫And now we got two re-renders.

266
00:14:47,460 --> 00:14:51,960
‫And so this does actually prove that before React 18,

267
00:14:51,960 --> 00:14:56,960
‫automatic batching was not happening inside a setTimeout.

268
00:14:57,461 --> 00:14:58,743
‫So that's really curious,

269
00:14:59,760 --> 00:15:02,613
‫but of course, let's now put it back.

270
00:15:04,920 --> 00:15:06,120
‫All right.

271
00:15:06,120 --> 00:15:07,740
‫So this was just to show you

272
00:15:07,740 --> 00:15:09,780
‫that there really is a difference,

273
00:15:09,780 --> 00:15:14,253
‫so that React 18, well really changed this.

274
00:15:15,480 --> 00:15:19,620
‫So again, now we should be back to only one.

275
00:15:19,620 --> 00:15:21,153
‫Yeah, there we go.

276
00:15:22,050 --> 00:15:25,500
‫Okay, and this is actually all I had to show you here.

277
00:15:25,500 --> 00:15:27,720
‫So this was a bit longer than expected,

278
00:15:27,720 --> 00:15:30,360
‫but we did to a lot of stuff here.

279
00:15:30,360 --> 00:15:34,890
‫So after you do a quick recap of everything we just do here,

280
00:15:34,890 --> 00:15:37,500
‫or that we did here, actually,

281
00:15:37,500 --> 00:15:40,593
‫then let's go to the next lecture.