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.