Debounce Input in Vue 3
Playing
01. Debounce Input in Vue 3

Episodes

0%
Your progress
  • Total: 7m
  • Played: 0m
  • Remaining: 7m
Join or sign in to track your progress

Transcript

00:00
Let's take a look at how to debounce input in Vue 3. Now, even if you don't know what debouncing is, of course,
00:07
we're going to cover that in here. And if you do know what debouncing is, and you just need to know how to implement it, then of course, we're going to show you how to do that here.
00:15
OK, so we've got a really, really simple form here in a Vue application. Doesn't matter how you set this up. I'm just using Vite here.
00:22
And the goal here is to have a form that automatically sends an API request to save this data to your database. So as I type in here, I want this to periodically save so I don't need to hit a Submit button.
00:37
Really, really nice for the UI, but can be really difficult to implement because you're going to be sending a huge amount of requests to your API. So the first thing that we're going to do
00:47
is hook this up to a form, or in this case, a reactive object inside of Vue. So we're going to go ahead and import reactive here from Vue.
00:57
You can use a ref as well if you want to. And we're going to go ahead and create a form variable here and use reactive. And we're just going to place in here
01:06
the first name value, which we're going to set initially to null, and the last name value. And we're going to do the same thing there. Now we can hook these up with vmodel
01:15
so we can reference the form and first name. And we can do the same thing here for the last name, like so. So as we type into these now, these
01:26
are going to be hooked up to the values inside of our form. Now to save these as we update these values, the first thing we might reach for is a watcher to watch when anything
01:38
inside of this reactive object changes. That's pretty easy to do. We're going to go ahead and import watch from Vue. We're going to pass the form in as the first argument
01:48
and then have a callback function in here to send an API request. So let's imagine that this console log is actually sending an API request.
01:57
If we head over to the browser and just monitor what happens in the console, I'm going to go ahead and start typing my name out. And effectively, what we would have done here
02:07
when we don't debounce this is send 17 requests. That's not ideal. 17 requests to an API just to enter a first and last name is massive.
02:19
At best, it's going to send way too many requests to your server, which would probably handle it. But at worst, it could rate limit the user, and then they won't be able to use your app.
02:29
So debouncing is the solution here. What we want to do is set a sort of threshold millisecond or second delay as we're typing into a form. So we only send requests to our API periodically.
02:45
Now, to do this, we are going to use the lodash debounce package. If you already have lodash included in a project you're working in, you
02:54
can just pull that in. Or if you're not, we're just going to individually pull this in. So we're not pulling in the whole lodash library.
03:01
And lodash is just a collection of helpful functions for JavaScript. So we're going to go ahead and grab the install command here and just pull this into our application.
03:12
And once that's finished, we can go ahead and import it into here. So we can import debounce from lodash debounce. There we go.
03:22
It's in there. OK, so we're going to look at a couple of different ways that we can do this. It really depends on how you want to structure this.
03:29
And there are some kind of best practices around this as well. So the first way to do this, and the way I wouldn't recommend, is to add the debounce directly to the callback function within watch.
03:43
We'll do that first, see how this works, and then we'll chop and change this around. And I'll show you why it's probably not a good idea to add this directly to the watcher.
03:52
So to do this, what we want to do is use the debounce function that we've just imported. So I've just cut that out of there. And the debounce function works like this.
04:01
We call debounce. The first argument is a callback. And the second argument is a millisecond delay. Or of course, if you wanted to bump and start
04:11
going into seconds, you could do. So I'm going to set this to 500. And I'm just going to paste back in the callback function that we just took out of there.
04:19
So effectively, we're now wrapping that callback function in this debounce function, passing in the callback in here, and then the millisecond amount in here. So just by doing that, what we're going to see now
04:31
is as the user types, this is going to detect within that 500 milliseconds whether it should go ahead and execute that callback. So if I was to type Alex really quickly,
04:43
I did that sort of as I was typing. I didn't leave 500 milliseconds between taking my fingers off the keyboard. So that went ahead and just sent one request.
04:53
If I was a little bit slower at typing, it would, of course, send four requests through. But most people at a nice typing speed will go ahead and type like this.
05:05
And then now what we've really done is just sent two requests through because we're seeing that delay when we're typing. So if you weren't aware of what debouncing was, now you know.
05:15
And if you were aware, you now know how to use it. Now, there's a slightly better way to structure this. What happens if within the watcher that we've created here, we had some other jobs to do?
05:29
Well, we've really got no choice now than to debounce them jobs as well. So we might want to do some clear up in here. We might want to show some sort of message
05:38
to say that this has been saved. We might want to do a whole host of things. But these are all going to now be affected by this debounce, which is not ideal.
05:47
So ideally, what we would have is a separate function to save the form changes. And we would debounce this instead and then reference this directly within our watcher.
05:59
So what we're effectively going to do is we're going to move the debounce over. So let's get rid of all of this and just start from scratch. So I'm going to go ahead and bring the callback back in here
06:09
and then call save form changes from the watcher but not debounce it at this point. We are going to debounce it directly on here. So let's say debounce, wrap this whole thing in here,
06:22
and then add in that delay. So now we can go ahead and send our API request from in here. But we can also do other jobs inside of here which won't be affected by the debounce.
06:32
The debounce really we only want to apply to save and send the API request. So we're going to say save to or send API request. And there we go.
06:41
So we're going to see this work in exactly the same way. We come over here and type. There we go. So it's working as we would expect.
06:49
But now we've just separated the concern of the debounce over to the API request itself and not directly tied this to the watcher. Now, of course, if you didn't need to do anything else
06:59
within this callback, what you could also do is tidy this up even more. You could just reference the save form changes function directly on the watcher without having a callback in here.
07:11
So we've got one function which deals with sending the API request and debouncing just that API request. And then we've got a watcher that either just calls this
07:21
to keep everything nice and clean or has a callback function in here to go ahead and save the form changes but also do something else not affected by that debounce.
07:31
So if we head over here now and I just start typing, you can see that, sure enough, we are now sending or still sending a limited amount of requests. So that is how to debounce input in Vue 3.
07:44
We have a form. We watch that form. And we debounce the function that is responsible for sending the API request.

Episode summary

In this episode, we dive into debouncing user input in a Vue 3 application. We kick things off by explaining what debouncing actually is—so you’ll know exactly why you’d want to use it—then get hands-on with a simple form example.

We start by creating a reactive form using Vue's reactive method and v-model to handle user inputs for first and last names. The goal: automatically send those form changes to an API, so users don’t have to click a separate "Submit" button every time. However, without debouncing, this would fire off way too many API requests with every single keystroke!

To solve that, we bring in lodash.debounce—a handy little helper from the lodash library—and show a couple ways to debounce your functions in Vue. We start with directly debouncing inside a watcher (not the cleanest approach), then refactor to debounce only the actual "save" function. This keeps your watcher clean and makes the debounce logic reusable and maintainable.

Whether you didn’t know what debouncing was before, or you just wanted to see the best way to use it in Vue 3, you’ll walk away knowing how to cleanly and efficiently debounce API calls from form input changes. We wrap up by demonstrating the end result: a smooth, practical auto-save feature that’s kind to your API. 🚀

Episode discussion

No comments, yet. Be the first!