Livewire Performance
This episode is for members only

Sign up to access "Livewire Performance" right now.

Get started
Already a member? Sign in to continue
Playing
08. Increasing default input debounce

Episodes

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

Transcript

00:00
We looked earlier in the series at deferring model properties that we are updating when we type, but we can also increase the default debounce amount as well to send less requests to our
00:11
backend. So if there's lots of typing happening in an input or a text area, and we do actually want to keep the backend component, the Livewire component, up to date, but we don't want this to happen too frequently, then we can increase the amount of time it takes between the user typing. Let's go over and create a component just to test this out. And we're going to go ahead and make a
00:32
component here called search. I've already been playing around with this. Okay, so let's go ahead and add this search component to our dashboard. And let's open up search.php. And let's just imagine that we had a query that we wanted to keep up to date as the user typed. So we'll create that public query property out in there. And over in the search blade file, we're going to go ahead
00:55
and create out an input type of search. And we can go ahead and hook this up via a model. So let's say wire model and query. Now we'll go ahead and output the query on the page just to see how this works without doing anything. And we'll go ahead and adjust it. So as I start to type something in here, that of course keeps that query up to date because we're sending lots of requests through to
01:18
our Livewire app. But you might want to reduce this amount, the amount that it takes, or the amount of requests that actually get sent back. So how do we do that? Well, we just go ahead and add a modifier on here called debounce. So before we looked at defer, which means that we don't send any requests to the back end until we click a button and perform an action, and the component gets re-rendered.
01:40
But that's not what we want here. We do want that data to keep up to date. We just want to modify the amount of time between typing. So by default, this is 150 milliseconds in Livewire. So when you use wire model, this will be set by default. And you can see that that pretty much is about the speed that we had before and the amount of requests that we had before.
01:59
But we can bump this up. So maybe for a search, 500 milliseconds might make more sense. Not that a Livewire component is probably the best thing for a search. It really depends. I mean, if you had some sort of data table, this would be really good because you don't need instant client updates. So I'm going to go ahead and type in code course here. And you can see that I type that really
02:18
quickly. So we're pretty much only sent one request. I didn't take my hands off the keyboard for half a second. So a kind of normal typing speed, that's a massive improvement. We're only sending one request down. If we were to bump this right down to 150 again, we can see the difference. If I just do a normal typing speed, we're sending an additional five requests. So a really simple
02:42
tip, if you have input where you do rely on the model's data to be kept up to date, on the back end component, e.g. this query, then consider increasing the default to bounce from 150 milliseconds to something more suitable. That's going to mean fewer requests through to your back end and, of course, an increase in performance.

Episode summary

In this episode, we're looking at how to reduce the number of requests Livewire makes to the backend when users type in an input. You've probably noticed that with the default settings, Livewire sends a request every time the user makes a change—like, literally every keypress! That can be a lot if someone is typing quickly.

To address this, we first revisit the concept of input debouncing and see how we can increase the default debounce time. We spin up a quick search component with an input wired to a query property. By default, the debounce is set at 150 milliseconds in Livewire, but you can easily bump this up to something like 500 milliseconds using the debounce modifier. This means that as you type, the backend will only get updates every half a second rather than on every key.

We see a quick demo of how this simple change can drastically cut down the number of requests—typing "code course" in one go only fires off a single request at 500ms, but would have sent several at the default. If your UI doesn't need instant updates per letter—and especially if you're working with things like searching or data tables—upping the debounce amount can really boost performance and reduce server load, without sacrificing user experience.

Episode discussion

No comments, yet. Be the first!