Original subtitles

Nice, and once we have our sample counter, let's take a look at how we can pass in function in our

set function and why we would want to do that.

So first we'll set up a counter or this is going to be more complex counter have already just pretty

much is going to be the same.

The only difference is that we're not going to use that many buttons.

So what I would want to do is grab all my section, copy and paste.

I'll still keep the margin that stays the same.

Let's call this a more complex or complex counter, more complex counter value style design.

And as far as the buttons will delete most of them, I'm not just say here button and it's going to

be just a increased button.

So let's say here button for the class, for the styling and line.

As far as the text inside the button, let's just say increase layer.

And now I want to set up a function that is going to be a complex increase.

Why am I calling this a complex increase?

Because I would want to add a little bit of the time out.

So essentially, once I click, there should be some delay.

So once we click, we'll set up two seconds delay and only then the value should be updated.

And in the process, we'll see why we would want to use that functional updater form.

Now, let's first set up the unclick, let's say, on click over here, and that is going to be equal

to a complex.

And then let's call it my function.

The increase, complex increase over here.

Now, of course, we do need to create that function because now we're just referencing.

So it's a constant and complex increase.

That is my function.

And it's not going to be looking for any argument.

However, in here, like I said, I don't want to simply call my set value.

What I would want is to go with set timeout.

And then remember, in that time, all we needed to pass and two things, a callback function, which

is going to run course in a certain amount of time, in our case, that is going to be two seconds.

And in here, we just pass in that value at two seconds.

Now we have our set time and we have the callback function that is going to run in two seconds.

Just remember that as far as the time we are passing here, the milliseconds, that's why for two seconds

we are going to pass in two thousand and then within the callback function, this is where I would want

to call my set and value because that is my function.

Now in this case, again, I'm going to go with a simple way where we have the value directly in our

set function.

So in my case, I'm going to go with set value and that value plus one and million dollar question.

Do you think once you click three, four or five, whatever times that will right away update after

those two seconds each and every time, or there's going to be an issue and you can probably already

guess, since we're setting up the whole example, that there has to be a gotcha.

So let's try it out.

And I'm going to do right now is click three times.

And the moment you click, you notice that, yeah, after two seconds, something happens.

But essentially I have clicked only once, meaning my value only increased by once.

So why is that happening?

Well, let's think about it.

So we're grabbing here the value.

Correct.

What we need to understand that this set function is asynchronous.

So what happens is that, for example, I click three times and all of these three times it thinks that

the value is zero.

Or in this case, if I click it right now, of course, it's going to think that the value is one.

So again, I can click three times and yeah, it's going to increase, but I can only buy one because

all those three times when we call this, that value will still be looking for that old value, meaning

to one or whatever.

So essentially we're not using the current value in a state because what should happen is each and every

time we click, we grab that previous value that was just right there before.

And then we update.

And this is the case where, of course, we would want to use that functional approach.

Now, how does that work, by the way?

I'll leave this for your reference just so you can have it later.

And the way it works, we go with set value and then instead of passing it directly, that new value

that we would want, we pass in the function.

Now, what's really interesting about this function that as a parameter, it gets that old state value.

So right before update.

Now, what is really, really important that it gets that current one and you'll see that in a second.

So in this case, it gets the one that is actually current, not the one that is called, for example,

two seconds ago now it gets the current one.

So, of course, in this case, what we can do is we can increase and you'll see how our values update

right away.

And since it is a primary, you can call it whatever you want.

But pretty common convention is going with priv, state or pre value, whatever you want.

And that whatever you're going to return from this function is now the new value.

Now, this is very, very important because if you leave this undefined, then of course, your whole

functionality will break.

Now I know what you're thinking.

You're like, well, why would I ever leave this undefined?

Well, also, keep in mind that you can start setting up here some kind of conditions based on something

and a small gotcher is that if you will return undefined meaning if you want return anything.

And we know that in JavaScript functions return on the fine line, your whole functionality might break.

So just be careful when you're setting up this function, whatever you'll return from, this function

will be that new set value.

And if it is undefined, well, then it's going to be a problem.

So in this case, what I would want is to go with proof state.

So whatever is my parameter and then plus on.

And now what you'll notice is that if I click, I don't know, 10 times, it's going to wait for that

first one.

And then, of course, right after that, notice how we nicely increase the function, meaning the value.

And it is happening because in this case we are getting that correct old value.

So right before the update previously, when we use this one, no, we were not getting the correct

value because if I click, for example, three, four or whatever times, I was all the time getting

the same value.

That is when I call all my functions.

In this case, it gets the current one, the one that is right before the update.

And I know what you're thinking.

You're like, OK, why we haven't used the function before, because let me tell you right away that,

yes, you can use this setup for all the previous examples that we used before and you'll see some people

that prefer that type of method.

Now, it is not set in stone.

Of course, in this case, you have to use it because, of course, it wouldn't make sense.

We saw the error that we're getting.

However, in some cases, the ones that we covered before, you can use the value way of doing that

where you just pass in the value.

But just so we all are on the same page.

Let me change this around here, for example.

I don't know.

Final one.

Now, in this case, I'm going to look for a example and we'll reformat a little bit, just so you understand

that, yes, you can use function in any of the examples that we covered, whatever that is, this one,

whether that is the second one with array or with an object.

And you might see some people who prefer doing Hathway.

Now, whichever way you choose is up to you.

Some people choose to use all the time function.

Some people just use it whenever it is definitely necessary, which of course, would be this case.

And the way we're going to do that is simply will change this around.

I'll say that I'm going to be looking for the final one in this case.

Now, keep in mind that of course I will delete it, meaning I'll leave the final that was there before.

I just want to showcase that.

Of course, we can use the functional approach as well.

So I'm going to go with you.

Stay here, then I'm going to go with final this case and I'm going to do the right example.

And since I change this around, I'm going to go with final here.

Now, that is my array.

Remember, the functionality should still work where we can remove one item.

We can we can clear all of them.

And now it's navigate to that final one.

Again, you don't have to do it with me.

But in my case, I'm just going to showcase that.

Of course, we can refactor this using the functional approach.

We remember we use this set people.

Now, what I'm going to do is just instead of the new people will say here, yeah, that we will pass

and the function, remember, whatever we return from this function is going to be the new value.

And if we really needed to or wanted to, I guess we can just set up the whole functionality here within

this function.

So what I'm going to do is just grab everything that we currently have within the remove item and move

it to the function within a set people.

Now, in this case, again, we're not really depending on that value, but just to showcase that,

of course, we can use it.

I will go with people.

So that is going to be my new or I'm sorry, the old value that is coming from the state.

And of course, I now filter it or not.

What just say old people.

Most people, and we will refactored our but so old people now, again, we filter it and then whatever

we return, that is going to be our new value.

So once I say notice how I can still remove the item correctly like I did before.

However, in this case, of course, we're using this functional approach where, again, we're getting

the parameter that is our old state values.

So right before we're updating or you can maybe also say the current value of that state and then whatever

we return.

From this function is going to be that if you step back and just show us where you can set up a bug,

for example, if I say that I don't have the return.

So come in the south, you'll notice of that first time.

I'll remove something.

I just have the bananas happening in my application.

Why?

Well, because now from this function, I'm setting up my people, my set value to be undefined, rather

why it is very, very important for us to always return something from this function and that something

will be that state value.

Again, just to reiterate, we have multiple options.

We can either pass in the value or there's going to be some cases or there's some people who prefer

using functional approach all the time where you can pass in the function, in your set function, and

then you can have the parameter.

And that parameter will be that current state or previous state right before the update.

And then you can set up some kind of functionality, whatever you want, and then whatever you'll return

from that function will be that new state value.