This episode is for members only

Sign up to access "Livewire Performance" right now.

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

Transcript

00:00
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.
00:09
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
00:25
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.
00:39
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
00:52
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,
01:08
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
01:23
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.
01:36
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
01:49
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
02:01
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.
02:19
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
02:36
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.

Episode summary

In this episode, we focus on using the lazy modifier with Livewire input fields. We’ve already talked about modifiers like defer and debounce (including how to change the debounce timing), but here we're adding lazy to our toolkit.

We start by quickly spinning up a new Livewire component called Lazy and adding a basic form with a name input field bound via wire:model. Normally, as you type, Livewire will send a request for every character you enter — which can be overkill unless you truly need every keystroke synced.

The episode explores how defer waits for a button press to sync, but sometimes you want something in between: that's what the lazy modifier is for. When you add lazy, Livewire waits to send the update until the input loses focus (for example, when you tab away or click elsewhere). This means fewer network requests, but your data still gets updated pretty promptly.

We wrap up by noting that this approach is especially handy for simple inline validation, and it provides a nice balance between immediate response and performance. So, by the end of the video, you'll know exactly how and when to use the lazy modifier to make your Livewire forms smarter and more efficient.

Episode discussion

No comments, yet. Be the first!