This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
21. Debouncing

Transcript

00:00
So as we already saw from the last episode, using the Live Modifier gives us the functionality we need for this to be updated as we type,
00:07
but it's sending way too many network requests down. So we have a couple of options here. We could use Blur, which we've already seen when we looked at our real-time validation.
00:17
That would mean, if we just open up our Network tab, that when we make any updates to our book, we don't see anything change until we navigate outside of the focus of this element.
00:27
Now, that's absolutely fine, but we kind of want this to act like a real-time update and not have to have the user click outside. So we're going to bring back Live,
00:37
but we're going to look at another modifier within LiveWire that we can use, and that is Debounce. So we can combine Live with Debounce. If you've not come across Debounce before,
00:48
effectively what this will do is allow you to provide a millisecond or even second amount that will not be activated until a key presses up for that amount of time.
01:00
So basically, what I'm going to do here is say 500 milliseconds. The user is typing. As soon as they lift their hands off the keyboard for 500 milliseconds, which sounds like a very short amount of time,
01:12
then this will be called. So let's go over and see the difference here. So I'm just going to type a character. We make a network request.
01:20
I'm going to type another character. We make another network request. But if I get rid of this and I go ahead and say, this book was really good, I haven't
01:30
taken my hands off the keyboard for 500 milliseconds while I was typing that entire sentence. So it's just sent one network request down for that entire thing.
01:39
So you can play around with this value depending on how it feels. But basically, that is it. It's sped this up because the user can type.
01:49
They don't have to focus away from this input for it to finally be saved like we have with Blur. But Debounce has just made that a little bit faster. So depending on the speed of how you're typing,
02:00
you will send quite a few network requests down. But it won't be as much. And this is just a really common technique used with live updating.
02:10
So there we go. That is another option. You can apply this to anything. We will be looking at this a little bit later
02:14
when we look at our search. But that is a modifier that we can use in combination with live to get all the benefits of live but without the really bad performance.

Episode summary

In this episode, we're tackling an annoying problem: when you use the live modifier for real-time updates, you might notice it bombards your server with a ton of network requests—basically, every time you type something. Not exactly ideal!

We start by revisiting how using the blur modifier makes updates only when you exit an input, like when you click away. That's good for saving network requests, but it doesn't feel as "live" as we'd like—we want updates to happen as you're typing, just not as much.

So, here's where the debounce modifier steps in. If you haven't seen it before, debounce lets you set a delay (say, 500ms), and it waits that long after you stop typing before actually firing off a network request. The result? You can smash out a whole sentence, and as long as you keep typing, it's just going to send one request at the end. Super slick.

We demonstrate the difference: typing a single letter triggers one request, but typing a long sentence quickly only sends a single request if you keep moving your fingers. This means less strain on your backend, happier users, and real-timeish updates without the noise. We'll use this trick again later, especially for search inputs, but for now, you've got another powerful tool in your real-time update toolkit.

Episode discussion

No comments, yet. Be the first!