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.