1
00:00:00,180 --> 00:00:07,920
Nice, and once we have our sample counter, let's take a look at how we can pass in function in our

2
00:00:08,040 --> 00:00:11,050
set function and why we would want to do that.

3
00:00:11,400 --> 00:00:19,410
So first we'll set up a counter or this is going to be more complex counter have already just pretty

4
00:00:19,410 --> 00:00:20,820
much is going to be the same.

5
00:00:20,820 --> 00:00:24,670
The only difference is that we're not going to use that many buttons.

6
00:00:25,020 --> 00:00:30,480
So what I would want to do is grab all my section, copy and paste.

7
00:00:30,840 --> 00:00:33,790
I'll still keep the margin that stays the same.

8
00:00:34,020 --> 00:00:41,900
Let's call this a more complex or complex counter, more complex counter value style design.

9
00:00:42,300 --> 00:00:50,670
And as far as the buttons will delete most of them, I'm not just say here button and it's going to

10
00:00:50,670 --> 00:00:52,200
be just a increased button.

11
00:00:52,410 --> 00:00:56,690
So let's say here button for the class, for the styling and line.

12
00:00:57,060 --> 00:01:02,280
As far as the text inside the button, let's just say increase layer.

13
00:01:02,610 --> 00:01:08,170
And now I want to set up a function that is going to be a complex increase.

14
00:01:08,550 --> 00:01:10,860
Why am I calling this a complex increase?

15
00:01:10,860 --> 00:01:17,010
Because I would want to add a little bit of the time out.

16
00:01:17,460 --> 00:01:21,520
So essentially, once I click, there should be some delay.

17
00:01:22,170 --> 00:01:28,170
So once we click, we'll set up two seconds delay and only then the value should be updated.

18
00:01:28,740 --> 00:01:34,710
And in the process, we'll see why we would want to use that functional updater form.

19
00:01:35,160 --> 00:01:42,690
Now, let's first set up the unclick, let's say, on click over here, and that is going to be equal

20
00:01:42,690 --> 00:01:44,070
to a complex.

21
00:01:44,610 --> 00:01:48,270
And then let's call it my function.

22
00:01:48,510 --> 00:01:52,240
The increase, complex increase over here.

23
00:01:52,560 --> 00:01:57,510
Now, of course, we do need to create that function because now we're just referencing.

24
00:01:57,900 --> 00:02:02,010
So it's a constant and complex increase.

25
00:02:02,040 --> 00:02:03,240
That is my function.

26
00:02:03,600 --> 00:02:05,910
And it's not going to be looking for any argument.

27
00:02:06,210 --> 00:02:11,460
However, in here, like I said, I don't want to simply call my set value.

28
00:02:11,820 --> 00:02:15,030
What I would want is to go with set timeout.

29
00:02:15,910 --> 00:02:21,730
And then remember, in that time, all we needed to pass and two things, a callback function, which

30
00:02:21,810 --> 00:02:28,120
is going to run course in a certain amount of time, in our case, that is going to be two seconds.

31
00:02:28,420 --> 00:02:32,130
And in here, we just pass in that value at two seconds.

32
00:02:32,170 --> 00:02:37,340
Now we have our set time and we have the callback function that is going to run in two seconds.

33
00:02:37,360 --> 00:02:43,270
Just remember that as far as the time we are passing here, the milliseconds, that's why for two seconds

34
00:02:43,540 --> 00:02:50,710
we are going to pass in two thousand and then within the callback function, this is where I would want

35
00:02:50,710 --> 00:02:55,160
to call my set and value because that is my function.

36
00:02:55,450 --> 00:03:01,980
Now in this case, again, I'm going to go with a simple way where we have the value directly in our

37
00:03:01,990 --> 00:03:02,660
set function.

38
00:03:02,980 --> 00:03:09,820
So in my case, I'm going to go with set value and that value plus one and million dollar question.

39
00:03:10,130 --> 00:03:17,920
Do you think once you click three, four or five, whatever times that will right away update after

40
00:03:17,920 --> 00:03:23,560
those two seconds each and every time, or there's going to be an issue and you can probably already

41
00:03:23,560 --> 00:03:27,800
guess, since we're setting up the whole example, that there has to be a gotcha.

42
00:03:28,090 --> 00:03:28,990
So let's try it out.

43
00:03:29,740 --> 00:03:31,720
And I'm going to do right now is click three times.

44
00:03:32,350 --> 00:03:38,800
And the moment you click, you notice that, yeah, after two seconds, something happens.

45
00:03:39,370 --> 00:03:45,690
But essentially I have clicked only once, meaning my value only increased by once.

46
00:03:46,210 --> 00:03:47,290
So why is that happening?

47
00:03:47,320 --> 00:03:48,400
Well, let's think about it.

48
00:03:48,850 --> 00:03:52,060
So we're grabbing here the value.

49
00:03:52,510 --> 00:03:53,140
Correct.

50
00:03:53,480 --> 00:03:58,320
What we need to understand that this set function is asynchronous.

51
00:03:58,690 --> 00:04:06,130
So what happens is that, for example, I click three times and all of these three times it thinks that

52
00:04:06,130 --> 00:04:08,170
the value is zero.

53
00:04:08,200 --> 00:04:13,450
Or in this case, if I click it right now, of course, it's going to think that the value is one.

54
00:04:13,720 --> 00:04:20,830
So again, I can click three times and yeah, it's going to increase, but I can only buy one because

55
00:04:20,860 --> 00:04:27,670
all those three times when we call this, that value will still be looking for that old value, meaning

56
00:04:27,820 --> 00:04:29,470
to one or whatever.

57
00:04:29,770 --> 00:04:36,610
So essentially we're not using the current value in a state because what should happen is each and every

58
00:04:36,610 --> 00:04:42,340
time we click, we grab that previous value that was just right there before.

59
00:04:43,120 --> 00:04:44,170
And then we update.

60
00:04:44,440 --> 00:04:48,910
And this is the case where, of course, we would want to use that functional approach.

61
00:04:49,210 --> 00:04:50,800
Now, how does that work, by the way?

62
00:04:50,800 --> 00:04:54,850
I'll leave this for your reference just so you can have it later.

63
00:04:55,180 --> 00:05:01,990
And the way it works, we go with set value and then instead of passing it directly, that new value

64
00:05:01,990 --> 00:05:05,260
that we would want, we pass in the function.

65
00:05:05,650 --> 00:05:12,240
Now, what's really interesting about this function that as a parameter, it gets that old state value.

66
00:05:12,370 --> 00:05:13,800
So right before update.

67
00:05:14,020 --> 00:05:20,680
Now, what is really, really important that it gets that current one and you'll see that in a second.

68
00:05:21,010 --> 00:05:29,080
So in this case, it gets the one that is actually current, not the one that is called, for example,

69
00:05:29,080 --> 00:05:31,820
two seconds ago now it gets the current one.

70
00:05:31,840 --> 00:05:37,450
So, of course, in this case, what we can do is we can increase and you'll see how our values update

71
00:05:37,450 --> 00:05:37,890
right away.

72
00:05:38,230 --> 00:05:41,020
And since it is a primary, you can call it whatever you want.

73
00:05:41,020 --> 00:05:47,890
But pretty common convention is going with priv, state or pre value, whatever you want.

74
00:05:49,040 --> 00:05:55,310
And that whatever you're going to return from this function is now the new value.

75
00:05:55,640 --> 00:06:00,410
Now, this is very, very important because if you leave this undefined, then of course, your whole

76
00:06:00,410 --> 00:06:01,580
functionality will break.

77
00:06:01,880 --> 00:06:03,230
Now I know what you're thinking.

78
00:06:03,230 --> 00:06:05,930
You're like, well, why would I ever leave this undefined?

79
00:06:05,960 --> 00:06:12,020
Well, also, keep in mind that you can start setting up here some kind of conditions based on something

80
00:06:12,350 --> 00:06:19,130
and a small gotcher is that if you will return undefined meaning if you want return anything.

81
00:06:19,370 --> 00:06:25,970
And we know that in JavaScript functions return on the fine line, your whole functionality might break.

82
00:06:26,330 --> 00:06:30,920
So just be careful when you're setting up this function, whatever you'll return from, this function

83
00:06:31,190 --> 00:06:32,840
will be that new set value.

84
00:06:32,840 --> 00:06:37,280
And if it is undefined, well, then it's going to be a problem.

85
00:06:37,610 --> 00:06:41,500
So in this case, what I would want is to go with proof state.

86
00:06:41,630 --> 00:06:45,380
So whatever is my parameter and then plus on.

87
00:06:45,740 --> 00:06:51,920
And now what you'll notice is that if I click, I don't know, 10 times, it's going to wait for that

88
00:06:51,920 --> 00:06:52,420
first one.

89
00:06:52,700 --> 00:06:59,810
And then, of course, right after that, notice how we nicely increase the function, meaning the value.

90
00:07:00,170 --> 00:07:06,880
And it is happening because in this case we are getting that correct old value.

91
00:07:07,040 --> 00:07:14,030
So right before the update previously, when we use this one, no, we were not getting the correct

92
00:07:14,030 --> 00:07:20,390
value because if I click, for example, three, four or whatever times, I was all the time getting

93
00:07:20,390 --> 00:07:21,980
the same value.

94
00:07:22,280 --> 00:07:25,390
That is when I call all my functions.

95
00:07:25,850 --> 00:07:32,360
In this case, it gets the current one, the one that is right before the update.

96
00:07:32,690 --> 00:07:34,130
And I know what you're thinking.

97
00:07:34,340 --> 00:07:39,980
You're like, OK, why we haven't used the function before, because let me tell you right away that,

98
00:07:39,980 --> 00:07:49,160
yes, you can use this setup for all the previous examples that we used before and you'll see some people

99
00:07:49,550 --> 00:07:51,660
that prefer that type of method.

100
00:07:52,010 --> 00:07:54,500
Now, it is not set in stone.

101
00:07:54,500 --> 00:07:59,410
Of course, in this case, you have to use it because, of course, it wouldn't make sense.

102
00:07:59,660 --> 00:08:01,610
We saw the error that we're getting.

103
00:08:01,880 --> 00:08:09,440
However, in some cases, the ones that we covered before, you can use the value way of doing that

104
00:08:09,650 --> 00:08:11,040
where you just pass in the value.

105
00:08:11,300 --> 00:08:14,360
But just so we all are on the same page.

106
00:08:14,750 --> 00:08:17,690
Let me change this around here, for example.

107
00:08:17,700 --> 00:08:18,110
I don't know.

108
00:08:18,380 --> 00:08:19,130
Final one.

109
00:08:19,520 --> 00:08:26,540
Now, in this case, I'm going to look for a example and we'll reformat a little bit, just so you understand

110
00:08:26,780 --> 00:08:34,070
that, yes, you can use function in any of the examples that we covered, whatever that is, this one,

111
00:08:34,310 --> 00:08:38,270
whether that is the second one with array or with an object.

112
00:08:38,480 --> 00:08:42,230
And you might see some people who prefer doing Hathway.

113
00:08:42,440 --> 00:08:45,350
Now, whichever way you choose is up to you.

114
00:08:45,560 --> 00:08:48,140
Some people choose to use all the time function.

115
00:08:48,390 --> 00:08:55,280
Some people just use it whenever it is definitely necessary, which of course, would be this case.

116
00:08:55,670 --> 00:09:00,260
And the way we're going to do that is simply will change this around.

117
00:09:00,710 --> 00:09:03,750
I'll say that I'm going to be looking for the final one in this case.

118
00:09:04,010 --> 00:09:10,520
Now, keep in mind that of course I will delete it, meaning I'll leave the final that was there before.

119
00:09:10,730 --> 00:09:12,680
I just want to showcase that.

120
00:09:12,680 --> 00:09:15,920
Of course, we can use the functional approach as well.

121
00:09:16,250 --> 00:09:17,450
So I'm going to go with you.

122
00:09:17,450 --> 00:09:23,840
Stay here, then I'm going to go with final this case and I'm going to do the right example.

123
00:09:24,290 --> 00:09:28,160
And since I change this around, I'm going to go with final here.

124
00:09:28,400 --> 00:09:29,550
Now, that is my array.

125
00:09:29,570 --> 00:09:34,910
Remember, the functionality should still work where we can remove one item.

126
00:09:34,910 --> 00:09:37,040
We can we can clear all of them.

127
00:09:37,280 --> 00:09:40,400
And now it's navigate to that final one.

128
00:09:40,610 --> 00:09:42,710
Again, you don't have to do it with me.

129
00:09:42,950 --> 00:09:45,500
But in my case, I'm just going to showcase that.

130
00:09:45,710 --> 00:09:51,470
Of course, we can refactor this using the functional approach.

131
00:09:51,800 --> 00:09:53,810
We remember we use this set people.

132
00:09:54,720 --> 00:10:02,340
Now, what I'm going to do is just instead of the new people will say here, yeah, that we will pass

133
00:10:02,340 --> 00:10:08,880
and the function, remember, whatever we return from this function is going to be the new value.

134
00:10:09,120 --> 00:10:16,020
And if we really needed to or wanted to, I guess we can just set up the whole functionality here within

135
00:10:16,020 --> 00:10:16,810
this function.

136
00:10:17,220 --> 00:10:23,190
So what I'm going to do is just grab everything that we currently have within the remove item and move

137
00:10:23,190 --> 00:10:25,860
it to the function within a set people.

138
00:10:26,250 --> 00:10:31,700
Now, in this case, again, we're not really depending on that value, but just to showcase that,

139
00:10:31,710 --> 00:10:32,990
of course, we can use it.

140
00:10:33,390 --> 00:10:36,110
I will go with people.

141
00:10:36,360 --> 00:10:42,110
So that is going to be my new or I'm sorry, the old value that is coming from the state.

142
00:10:42,360 --> 00:10:45,390
And of course, I now filter it or not.

143
00:10:45,740 --> 00:10:47,730
What just say old people.

144
00:10:48,740 --> 00:10:57,320
Most people, and we will refactored our but so old people now, again, we filter it and then whatever

145
00:10:57,320 --> 00:11:01,370
we return, that is going to be our new value.

146
00:11:01,670 --> 00:11:08,480
So once I say notice how I can still remove the item correctly like I did before.

147
00:11:08,600 --> 00:11:13,820
However, in this case, of course, we're using this functional approach where, again, we're getting

148
00:11:13,820 --> 00:11:17,640
the parameter that is our old state values.

149
00:11:17,640 --> 00:11:25,460
So right before we're updating or you can maybe also say the current value of that state and then whatever

150
00:11:25,460 --> 00:11:26,180
we return.

151
00:11:27,160 --> 00:11:34,660
From this function is going to be that if you step back and just show us where you can set up a bug,

152
00:11:35,050 --> 00:11:39,160
for example, if I say that I don't have the return.

153
00:11:39,400 --> 00:11:43,060
So come in the south, you'll notice of that first time.

154
00:11:43,060 --> 00:11:44,140
I'll remove something.

155
00:11:44,860 --> 00:11:48,400
I just have the bananas happening in my application.

156
00:11:48,430 --> 00:11:48,760
Why?

157
00:11:49,120 --> 00:11:55,780
Well, because now from this function, I'm setting up my people, my set value to be undefined, rather

158
00:11:55,780 --> 00:12:03,400
why it is very, very important for us to always return something from this function and that something

159
00:12:03,400 --> 00:12:05,210
will be that state value.

160
00:12:05,530 --> 00:12:09,280
Again, just to reiterate, we have multiple options.

161
00:12:09,520 --> 00:12:15,640
We can either pass in the value or there's going to be some cases or there's some people who prefer

162
00:12:15,820 --> 00:12:24,100
using functional approach all the time where you can pass in the function, in your set function, and

163
00:12:24,100 --> 00:12:26,650
then you can have the parameter.

164
00:12:26,950 --> 00:12:32,020
And that parameter will be that current state or previous state right before the update.

165
00:12:32,290 --> 00:12:38,560
And then you can set up some kind of functionality, whatever you want, and then whatever you'll return

166
00:12:39,070 --> 00:12:43,930
from that function will be that new state value.