Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
16415
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.