 Let's add a debounce function to our react component so that we can limit the number of times that our hook re-renders the component. I refresh this to clear the log. You can see that we're just logging a bunch of events. So this is a single intent, but it logs like way too many events. I'm going to do that again. Swish. We could probably just re-render one time based on that one intent. We would do that with a function called debounce. Now you can get this debounce function from a ton of libraries like lodash or underscore vol underscore. I'm going to copy and paste it in, but this is literally lodash source code. I should probably reference that lodash. Now, when we have debounce like this, it takes a function and a timeout, which defaults to 300 milliseconds. But where do we put it inside of our use effect? I'm going to put it right around our handle resize function. Remember, we don't want to insert any anonymous functions into these use effect set up and tear down functions because they will create a memory leak. So we need to augment our event handler instead. In this case, I can just put debounce around the anonymous function and save. Let's refresh to get a clear log and see what happens. If I go one pixel at a time, we'll see a double rendering. This is fine because React actually does this in development mode. It's super confusing in situations like this, but it does that. Now, before when I pulled this this way, we would see a bunch of events firing. And now we just see two, which is exactly what we want. Let me do it again. Swish to again, to again, using debounce. We've limited the number of times that this component re-renders based on the intent, but we haven't changed the UI. The UI still works. So if I pull this, whether I go slow or fast, it's still going to respond. It just waits a little bit of time. Now, with our debounce function, we can actually provide a time. So we have 300 milliseconds by default. But if we wanted that to be faster, just find our debounce, provide that second option. We could pull this down to one millisecond, which would probably get us pretty close to what we were seeing before. So if I do this, we see a bunch of them. And then if I change to like a thousand milliseconds, like a whole last second, we'll see the UI really delay on this. So I pull this and then the event fires, pull fire. But it's not fire. It sucks. Now, I talked about this double rendering thing. Every time we see this event fire, we see two of them fire. I actually want you to look into why that is. I'm going to give you a clue. It's a react feature called strict mode. Do your best to find it and turn it on and off. You should be able to on demand to be able to see just one of these events if you want to or turn it back on and see the double firing. If you want to see how we got to this place, well, you can follow this link tree back to the original assignment. Or if you're watching this whole thing later, you can click here on this other video and see the answer for how to turn strict mode off. I'll see you in the next one. Bye.