Sign up to access "Livewire Performance" right now.

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.