00:00 We have a simple counter that every time you click on it, it waits a certain amount of time and then it increments the count based on this step. And so here's the problem that we are currently facing.

00:14 If I click on this button and then I increment the step, should it go to two or should it actually go to three? And we're getting some information from our project manager that says, hey, I want to make it so that when we finally do end up incrementing,

00:31 we increment by the amount that the step reads at the time we increment, not at the time that we clicked. OK, so that is the the desired outcome of this behavior. What this UI is describing or what this UI is implementing is what's called a debounce.

00:49 It allows you to click a button or perform some action many, many, many times. And only when that interaction or that function is not called for a certain amount of time will the function actually be called. So that's the idea of the debounce pattern.

01:09 So you can think of like if you go to the store and you're checking out and you're scanning all of your items that you're buying, the scanner is able to look at and see the barcode like and probably scan it a bajillion times as you go through and scan it.

01:27 But once it's been scanned, then the barcode or the scanner is like, OK, I'm going to wait a little bit before I allow myself to scan another thing. That way you don't buy like 30 plushies or whatever.

01:40 So that's kind of the idea of a debounce, is that we're just going to prevent the actual thing from being called until the user has stopped doing whatever interaction for a certain amount of time. So the challenge with the debounce is that we want.

01:59 And in this particular case is that the time when the function was invoked last versus the state of the world, when it finally actually gets invoked, like in our case, 3000 milliseconds later or whatever, that many things can change in that in the interim period.

02:19 And our requirements for this particular use case are that we have the latest versions of everything at the time the function is called, not at the time that it was initially invoked. That makes sense. So you could say, OK, well, here's my option one.

02:35 I've got this use debounce hook that we've already implemented that is just not quite working the way that we want it to. And so here we pass our increment function. So this is the function we want to have called. And here's how long we want to wait between user interactions before we actually call it.

02:54 And so the problem with this is that instead of use debounce, it's going to be doing something in a use effect for the set timeout and all of that, which is or rather it's a use memo call because the debounce is external to react.

03:09 But, yeah, we need to pass increment inside of a use memo call to memoize the debounce function. And with that, we get a new version of increment every single time we get a re-render.

03:26 So when I update the step, then increment gets changed. And and so we're going to break the memorization of our debounce function. The other option is we say, OK, use memo callback.

03:45 That's a mistake. It should be use callback or actually it should be use memo. There we go. We're going to memoize this callback. And so with use the use memo option. Now, any time the step changes, we're going to be incrementing or changing our increment function again,

04:02 which is going to break the memorization of our use debounce function call as well. So we're in the same boat with either one of these options. So the third option is the use ref pattern and that is what you're going to or the latest ref pattern. And that is what you're going to be implementing in this exercise.

04:20 So it involves a ref, a use ref, a use effect and just setting the current value of our ref to the actual value and then only using the ref when we're actually trying to call things. And that way we'll always get the latest version of our increment function.

04:37 So we can keep our increment function like this. We'll always get the latest version of this, which means we'll have the latest version of the step and we'll have the behavior that we're looking for. OK, I think that I've talked about this enough. When you're when you feel like you're in a good spot and that you've implemented it correctly, this is the behavior you should observe.

04:56 So you should be able to click on this once and then increment this step to two and it should update the count to two rather than to just one. So that is your objective. Good luck.