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

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.
11 episodes1 hr 22 mins

Overview

Building powerful apps with Livewire is a breeze, but as your app grows, you may run into performance issues. This series covers tips and techniques to keep your Livewire apps speedy.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!