This episode is for members only

Sign up to access "Livewire Performance" right now.

Get started
Already a member? Sign in to continue
11. Lazy input


We've already covered modifiers like defer and debounce, particularly increasing the debounce amount, but we're going to add another one to our arsenal now, and that is lazy.
So let's take a look at lazy inputs. To go ahead and demo this, I'm going to go ahead and create out a component, so let's say phpArtisanLiveWireMake once again, and let's just call this lazy. Okay, so we're going to go over to lazy, and we're going to add in a property here that's
going to be part of a form. So let's just say name again to keep things simple. So if we go over to lazy.blade.php, let's go ahead and add in an input here just for the type of text, and let's go ahead and hook this up with wire model.
So let's hook that up to name. Okay, so over to our dashboard, let's go ahead and say LiveWireLazy, and let's head over and check this out. Okay, so we know that for every character that we type, or pretty much every character
we type, we're going to see a request to our LiveWire component. Not always great unless you really need this data to be kept up to date in real time as the user types. Now like I said, if we come over to lazy, we've already looked at things like defer,
which will not do anything, not send any request, until we hit a button and perform some sort of action within LiveWire or just call a method. That's not what we want here. We do want this to be kept up to date, but we only want this to be kept up to date when
we lose focus of this input, and that's what lazy does. So just to demo this out, let's go ahead and output the name out here, and let's get rid of defer. So we already know that if I type here, we're going to see lots of requests.
Okay, so let's take a look at lazy and just add the lazy modifier. That's pretty much all that we need to do here. So I'm going to give this a refresh. Let's keep an eye on our network requests around here, and I'm going to go ahead and
type in my full name. And I could type in my even fuller name if I wanted to, but we're still not making any requests. Now with lazy, what this is going to do is as soon as we lose focus on this input, either
by hitting tab or whatever, or clicking away, then we make the request. So this is a nice kind of in-between if you're struggling with defer, not quite doing what you want, and also debounce, not quite working how you want it to, then this can be a really good solution, particularly for validation.
So you could apply some sort of validation here when the user clicks away from the input. We can cover that at a later time. So this is just going to keep working. If I type Alex, the original value remains, but as soon as I click away or I tab away
from this, it's going to update the value. And that's pretty much it. Adding the lazy modifier is going to save you some network requests, but still provide that experience that you might need as the user navigates through your forms.
11 episodes1 hr 22 mins


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!


No comments, yet. Be the first to leave a comment.