1
00:00:01,140 --> 00:00:02,370
‫Let's now implement

2
00:00:02,370 --> 00:00:05,733
‫the missing functionality of this application,

3
00:00:07,590 --> 00:00:11,310
‫which is to actually make these buttons here work

4
00:00:11,310 --> 00:00:14,760
‫in order to manually adjust the duration.

5
00:00:14,760 --> 00:00:17,580
‫So, right now, the duration here adjusts

6
00:00:17,580 --> 00:00:22,143
‫each time that we set one of these states, right here.

7
00:00:23,220 --> 00:00:24,840
‫So hopefully, you analyze that

8
00:00:24,840 --> 00:00:27,630
‫when you first checked out a code.

9
00:00:27,630 --> 00:00:30,810
‫So notice how we have four pieces of state here,

10
00:00:30,810 --> 00:00:32,460
‫one for the number.

11
00:00:32,460 --> 00:00:33,330
‫So this one.

12
00:00:33,330 --> 00:00:35,580
‫Then for the sets, for the speed,

13
00:00:35,580 --> 00:00:38,040
‫and for the duration of the length.

14
00:00:38,040 --> 00:00:41,700
‫And so then, the duration here is a derived state,

15
00:00:41,700 --> 00:00:44,610
‫which is on every render calculated

16
00:00:44,610 --> 00:00:47,400
‫from these four state variables right here.

17
00:00:47,400 --> 00:00:51,060
‫And so that's what we then get here.

18
00:00:51,060 --> 00:00:53,670
‫So, of course, as soon as we update

19
00:00:53,670 --> 00:00:55,140
‫one of these state variables,

20
00:00:55,140 --> 00:00:56,760
‫the component re-renders,

21
00:00:56,760 --> 00:01:01,290
‫and then the duration gets recalculated and displayed here.

22
00:01:01,290 --> 00:01:03,480
‫So that's just very common stuff

23
00:01:03,480 --> 00:01:05,940
‫that we have been doing all the time.

24
00:01:05,940 --> 00:01:10,290
‫But now, again, we actually want to make these buttons work.

25
00:01:10,290 --> 00:01:12,810
‫So we want the duration to update

26
00:01:12,810 --> 00:01:15,660
‫as a result of clicking these buttons.

27
00:01:15,660 --> 00:01:18,480
‫And so that means that the duration now

28
00:01:18,480 --> 00:01:20,823
‫needs to be a new piece of state.

29
00:01:22,560 --> 00:01:24,273
‫So, let's do that.

30
00:01:25,200 --> 00:01:27,723
‫So let's comment out this one,

31
00:01:30,930 --> 00:01:34,350
‫and place the duration in state.

32
00:01:34,350 --> 00:01:36,320
‫So duration and setDuration

33
00:01:38,801 --> 00:01:39,801
‫is useState.

34
00:01:40,860 --> 00:01:43,740
‫And let's start at zero.

35
00:01:43,740 --> 00:01:47,880
‫So we can not simply place this formula right here,

36
00:01:47,880 --> 00:01:51,450
‫because it would only be called on the initial render.

37
00:01:51,450 --> 00:01:52,530
‫Remember that.

38
00:01:52,530 --> 00:01:54,510
‫And so that's not what we want.

39
00:01:54,510 --> 00:01:58,080
‫Of course, we will want to calculate this duration

40
00:01:58,080 --> 00:02:00,750
‫each time that we click on one of these buttons,

41
00:02:00,750 --> 00:02:02,610
‫but also each time

42
00:02:02,610 --> 00:02:05,520
‫that one of these state variables here changes.

43
00:02:05,520 --> 00:02:09,900
‫So just like it was working before with this derived state.

44
00:02:09,900 --> 00:02:11,370
‫And so now, we need a way

45
00:02:11,370 --> 00:02:13,710
‫of getting this functionality back.

46
00:02:13,710 --> 00:02:16,740
‫So basically, of updating the duration state

47
00:02:16,740 --> 00:02:20,820
‫each time one of these state variables here updates.

48
00:02:20,820 --> 00:02:24,330
‫Now there are two ways in which we could do this.

49
00:02:24,330 --> 00:02:26,730
‫So we could update the duration

50
00:02:26,730 --> 00:02:29,520
‫each time that we update one of these

51
00:02:29,520 --> 00:02:31,233
‫in the event handler function.

52
00:02:32,100 --> 00:02:34,290
‫So basically, we have, of course,

53
00:02:34,290 --> 00:02:36,720
‫one event handler for each of them.

54
00:02:36,720 --> 00:02:40,110
‫For example, here is the one for the number.

55
00:02:40,110 --> 00:02:42,720
‫Here is the one for the number of sets.

56
00:02:42,720 --> 00:02:44,370
‫So for this one right here.

57
00:02:44,370 --> 00:02:47,190
‫And then these are the ones down here.

58
00:02:47,190 --> 00:02:48,780
‫So one event handler function

59
00:02:48,780 --> 00:02:53,780
‫for each change event on each of these input elements.

60
00:02:55,110 --> 00:02:57,150
‫So as I was saying, we could now,

61
00:02:57,150 --> 00:02:59,310
‫in each of these event handlers,

62
00:02:59,310 --> 00:03:02,940
‫not only update the state that it is about,

63
00:03:02,940 --> 00:03:05,760
‫but also the duration state.

64
00:03:05,760 --> 00:03:09,240
‫So for example, here, besides doing that,

65
00:03:09,240 --> 00:03:11,080
‫we could then also

66
00:03:12,960 --> 00:03:14,340
‫set duration

67
00:03:14,340 --> 00:03:18,210
‫and then copy that formula over here.

68
00:03:18,210 --> 00:03:21,513
‫Let's actually just do this here as an example.

69
00:03:26,550 --> 00:03:29,850
‫So, this is not the solution that we're going for,

70
00:03:29,850 --> 00:03:33,303
‫but I just want to exemplify this.

71
00:03:34,380 --> 00:03:36,240
‫So now, here, of course,

72
00:03:36,240 --> 00:03:40,890
‫we cannot use the break here because it is still stale.

73
00:03:40,890 --> 00:03:45,390
‫So, the update only actually happens after the render,

74
00:03:45,390 --> 00:03:48,360
‫as we have talked about many times before.

75
00:03:48,360 --> 00:03:53,360
‫So here, we would even have to use e.target.value.

76
00:03:53,850 --> 00:03:56,040
‫And so let's see.

77
00:03:56,040 --> 00:03:59,430
‫And so that would actually work, right?

78
00:03:59,430 --> 00:04:02,190
‫But we would then have to do this

79
00:04:02,190 --> 00:04:04,140
‫in every single event handler.

80
00:04:04,140 --> 00:04:07,293
‫So repeating all this code all over the place.

81
00:04:08,850 --> 00:04:10,980
‫So instead of doing this,

82
00:04:10,980 --> 00:04:14,520
‫we will now again use the useEffect Hook

83
00:04:14,520 --> 00:04:18,303
‫to basically synchronize these states with one another.

84
00:04:22,230 --> 00:04:25,623
‫So, just fixing this year seems a bit complicated.

85
00:04:27,180 --> 00:04:28,013
‫All right.

86
00:04:29,340 --> 00:04:32,490
‫So, what we're going to do now, as I just said,

87
00:04:32,490 --> 00:04:34,740
‫is to use the useEffect Hook

88
00:04:34,740 --> 00:04:37,590
‫to keep this duration state here in sync

89
00:04:37,590 --> 00:04:40,500
‫with all these other state variables.

90
00:04:40,500 --> 00:04:44,580
‫Now, notice how I said earlier in that long lecture

91
00:04:44,580 --> 00:04:46,140
‫about the useEffect Hook,

92
00:04:46,140 --> 00:04:50,340
‫that this is exactly what we usually should not do.

93
00:04:50,340 --> 00:04:53,010
‫However, I think that in this situation,

94
00:04:53,010 --> 00:04:57,150
‫this is a perfectly fine use case for the useEffect Hook,

95
00:04:57,150 --> 00:05:00,870
‫because there are so many state variables here involved,

96
00:05:00,870 --> 00:05:03,420
‫that it just becomes very impractical,

97
00:05:03,420 --> 00:05:07,290
‫and even unreadable and confusing to do it in a way

98
00:05:07,290 --> 00:05:09,120
‫that I just demonstrated you.

99
00:05:09,120 --> 00:05:11,130
‫And so again,

100
00:05:11,130 --> 00:05:15,003
‫we should instead use an effect in this situation.

101
00:05:19,470 --> 00:05:20,910
‫Okay.

102
00:05:20,910 --> 00:05:24,390
‫And the dependency array, we can already write it ourselves

103
00:05:24,390 --> 00:05:28,143
‫so that we understand why we actually need this effect.

104
00:05:29,070 --> 00:05:32,100
‫So here, we will want to set the duration

105
00:05:32,100 --> 00:05:35,640
‫whenever the number changes,

106
00:05:35,640 --> 00:05:37,980
‫or when the sets change,

107
00:05:37,980 --> 00:05:40,170
‫or when the speed changes,

108
00:05:40,170 --> 00:05:44,283
‫or when the duration of the break changes.

109
00:05:45,990 --> 00:05:46,823
‫All right.

110
00:05:46,823 --> 00:05:50,193
‫And now, here, we then need that actual formula.

111
00:05:51,210 --> 00:05:54,210
‫So, exactly this one right here.

112
00:05:54,210 --> 00:05:56,100
‫And so, then, we will be back

113
00:05:56,100 --> 00:06:01,100
‫to the application working in the exact same way as before.

114
00:06:01,140 --> 00:06:02,880
‫So everything works here.

115
00:06:02,880 --> 00:06:05,010
‫And so now, with this in place,

116
00:06:05,010 --> 00:06:07,860
‫we can implement these two buttons,

117
00:06:07,860 --> 00:06:10,080
‫which of course still don't work,

118
00:06:10,080 --> 00:06:12,720
‫but we first had to do all of this here

119
00:06:12,720 --> 00:06:16,260
‫so that we could now then also set the duration state

120
00:06:16,260 --> 00:06:18,123
‫when we click on those buttons.

121
00:06:19,350 --> 00:06:23,700
‫So let's actually write separate event handler functions

122
00:06:23,700 --> 00:06:24,753
‫in this case.

123
00:06:26,010 --> 00:06:29,733
‫So function handleInc, let's say.

124
00:06:34,080 --> 00:06:38,040
‫And so, here, we get the current duration

125
00:06:38,040 --> 00:06:42,903
‫and we want to return the duration plus one.

126
00:06:44,340 --> 00:06:45,870
‫So at least for now.

127
00:06:45,870 --> 00:06:48,603
‫So let's find the button here.

128
00:06:49,440 --> 00:06:50,790
‫Yeah. So, right here.

129
00:06:50,790 --> 00:06:54,447
‫Let's now replace this dummy function with handleInc.

130
00:06:55,830 --> 00:06:57,600
‫And so...

131
00:06:57,600 --> 00:06:58,983
‫Yeah, that works.

132
00:07:02,820 --> 00:07:04,230
‫Nice.

133
00:07:04,230 --> 00:07:06,273
‫Now, let me just show you something.

134
00:07:07,590 --> 00:07:11,520
‫So, I'm trying to find a situation where, here,

135
00:07:11,520 --> 00:07:15,390
‫we have half a minute, and...

136
00:07:15,390 --> 00:07:18,000
‫Ah, so here is one of the situations

137
00:07:18,000 --> 00:07:19,830
‫where we have half a minute.

138
00:07:19,830 --> 00:07:22,560
‫And so in this case, when we click on this button,

139
00:07:22,560 --> 00:07:26,760
‫we actually want to round it to the next value.

140
00:07:26,760 --> 00:07:29,703
‫So the next entire value.

141
00:07:30,840 --> 00:07:33,990
‫So that would be 83, in this situation,

142
00:07:33,990 --> 00:07:37,050
‫and not 83 and 30 seconds.

143
00:07:37,050 --> 00:07:40,890
‫So what we can do is first,

144
00:07:40,890 --> 00:07:44,643
‫round that down with Math.floor.

145
00:07:46,350 --> 00:07:49,533
‫And yeah, so now that works.

146
00:07:50,880 --> 00:07:51,713
‫Okay.

147
00:07:51,713 --> 00:07:55,533
‫And now let's also create handle decrement,

148
00:07:57,257 --> 00:07:58,090
‫handleDec.

149
00:08:06,150 --> 00:08:08,490
‫And here, we're gonna do the opposite.

150
00:08:08,490 --> 00:08:12,870
‫So we will first round up the current duration,

151
00:08:12,870 --> 00:08:15,960
‫and then we will subtract one.

152
00:08:15,960 --> 00:08:19,740
‫And so now, this will first round it up to 80,

153
00:08:19,740 --> 00:08:22,053
‫and then from there we go down to 79.

154
00:08:23,250 --> 00:08:26,880
‫Now, of course, we need to wire this up.

155
00:08:26,880 --> 00:08:28,743
‫So place that function here.

156
00:08:30,589 --> 00:08:31,920
‫So handleDec.

157
00:08:31,920 --> 00:08:35,133
‫And so, again, it'll now go down to 79.

158
00:08:36,330 --> 00:08:38,350
‫Now, the problem is that

159
00:08:40,080 --> 00:08:44,943
‫if this is really slow or really low, actually,

160
00:08:46,320 --> 00:08:49,803
‫then, of course, we go to negative values.

161
00:08:50,790 --> 00:08:52,500
‫So let's fix that.

162
00:08:52,500 --> 00:08:55,953
‫And so here, let's use a ternary.

163
00:08:58,500 --> 00:09:03,500
‫So if the duration is still greater than one, then do this.

164
00:09:03,630 --> 00:09:04,953
‫But otherwise,

165
00:09:06,330 --> 00:09:08,733
‫then the next duration will be zero.

166
00:09:09,930 --> 00:09:10,773
‫All right.

167
00:09:12,540 --> 00:09:16,173
‫And one minute and zero, and we can't go below that.

168
00:09:17,820 --> 00:09:18,660
‫Nice.

169
00:09:18,660 --> 00:09:22,620
‫So at this, we implemented what we set out to do.

170
00:09:22,620 --> 00:09:24,420
‫So these buttons now work.

171
00:09:24,420 --> 00:09:26,520
‫And again, in order to do that,

172
00:09:26,520 --> 00:09:29,160
‫we needed to transform this duration here

173
00:09:29,160 --> 00:09:31,170
‫into a state variable.

174
00:09:31,170 --> 00:09:34,680
‫And so then, to update that state variable in an easy way,

175
00:09:34,680 --> 00:09:38,880
‫we created this effect which lists for the state change

176
00:09:38,880 --> 00:09:41,820
‫in any one of these four state variables.

177
00:09:41,820 --> 00:09:43,350
‫And if that happens,

178
00:09:43,350 --> 00:09:46,620
‫it will then calculate our new duration.

179
00:09:46,620 --> 00:09:49,080
‫And so, here, we have the classic example

180
00:09:49,080 --> 00:09:51,810
‫of using an effect to update state

181
00:09:51,810 --> 00:09:54,570
‫based on another state update,

182
00:09:54,570 --> 00:09:57,540
‫which again, is not always desirable

183
00:09:57,540 --> 00:09:59,910
‫and it's not always the best solution.

184
00:09:59,910 --> 00:10:02,760
‫But here, I think it is perfectly fine

185
00:10:02,760 --> 00:10:06,450
‫because otherwise, we would have to spread this logic here

186
00:10:06,450 --> 00:10:09,120
‫into four different event handler functions

187
00:10:09,120 --> 00:10:11,190
‫which wouldn't be really nice.

188
00:10:11,190 --> 00:10:15,090
‫Now, let me actually show you the downside here.

189
00:10:15,090 --> 00:10:17,250
‫So using the profiler,

190
00:10:17,250 --> 00:10:18,660
‫so let's start,

191
00:10:18,660 --> 00:10:23,250
‫and then I will just adjust this date once.

192
00:10:23,250 --> 00:10:25,953
‫So one state update, right?

193
00:10:27,750 --> 00:10:30,180
‫Well, we now get all these date updates

194
00:10:30,180 --> 00:10:32,970
‫because of the timer they're updating.

195
00:10:32,970 --> 00:10:36,843
‫So let's maybe turn that off, actually, just for a minute.

196
00:10:41,130 --> 00:10:42,453
‫So let's do this.

197
00:10:43,590 --> 00:10:44,823
‫Let's do this again.

198
00:10:46,200 --> 00:10:49,920
‫So, only updating once, which we would think

199
00:10:49,920 --> 00:10:52,260
‫only gives us one render.

200
00:10:52,260 --> 00:10:55,173
‫But actually, we do have two renders.

201
00:10:56,190 --> 00:10:58,500
‫So the calculator is rendered.

202
00:10:58,500 --> 00:11:02,460
‫And then again, and so this is exactly the problem

203
00:11:02,460 --> 00:11:05,733
‫of the useEffect Hook to update states.

204
00:11:07,320 --> 00:11:09,270
‫So, right here.

205
00:11:09,270 --> 00:11:11,910
‫So basically, this first state update

206
00:11:11,910 --> 00:11:15,150
‫is this number of sets updating,

207
00:11:15,150 --> 00:11:18,300
‫which will then trigger this effect here.

208
00:11:18,300 --> 00:11:20,010
‫But the effect only runs

209
00:11:20,010 --> 00:11:22,410
‫after the render has already happened.

210
00:11:22,410 --> 00:11:25,050
‫And so then when we set the state here again,

211
00:11:25,050 --> 00:11:27,540
‫we get a second render.

212
00:11:27,540 --> 00:11:31,440
‫So React is not able to batch these two renders in one,

213
00:11:31,440 --> 00:11:35,340
‫simply because, again, the effect actually runs

214
00:11:35,340 --> 00:11:38,220
‫way after the render has already happened.

215
00:11:38,220 --> 00:11:40,380
‫And so just be aware of that issue

216
00:11:40,380 --> 00:11:43,200
‫whenever you do something like this.

217
00:11:43,200 --> 00:11:45,660
‫So, whenever you can, again, avoid this.

218
00:11:45,660 --> 00:11:48,240
‫But when you have so many state variables here

219
00:11:48,240 --> 00:11:50,760
‫that influence the value of another state,

220
00:11:50,760 --> 00:11:52,323
‫then you can do this.