So as we already saw from the last episode, using the Live Modifier gives us the functionality we need for this to be updated as we type,
00:07
but it's sending way too many network requests down. So we have a couple of options here. We could use Blur, which we've already seen when we looked at our real-time validation.
00:17
That would mean, if we just open up our Network tab, that when we make any updates to our book, we don't see anything change until we navigate outside of the focus of this element.
00:27
Now, that's absolutely fine, but we kind of want this to act like a real-time update and not have to have the user click outside. So we're going to bring back Live,
00:37
but we're going to look at another modifier within LiveWire that we can use, and that is Debounce. So we can combine Live with Debounce. If you've not come across Debounce before,
00:48
effectively what this will do is allow you to provide a millisecond or even second amount that will not be activated until a key presses up for that amount of time.
01:00
So basically, what I'm going to do here is say 500 milliseconds. The user is typing. As soon as they lift their hands off the keyboard for 500 milliseconds, which sounds like a very short amount of time,
01:12
then this will be called. So let's go over and see the difference here. So I'm just going to type a character. We make a network request.
01:20
I'm going to type another character. We make another network request. But if I get rid of this and I go ahead and say, this book was really good, I haven't
01:30
taken my hands off the keyboard for 500 milliseconds while I was typing that entire sentence. So it's just sent one network request down for that entire thing.
01:39
So you can play around with this value depending on how it feels. But basically, that is it. It's sped this up because the user can type.
01:49
They don't have to focus away from this input for it to finally be saved like we have with Blur. But Debounce has just made that a little bit faster. So depending on the speed of how you're typing,
02:00
you will send quite a few network requests down. But it won't be as much. And this is just a really common technique used with live updating.
02:10
So there we go. That is another option. You can apply this to anything. We will be looking at this a little bit later
02:14
when we look at our search. But that is a modifier that we can use in combination with live to get all the benefits of live but without the really bad performance.
25 episodes•2 hrs 52 mins•1 year ago
Overview
Ready to learn Livewire? Throughout this course, we’ll build up a real application that touches almost every aspect of Livewire — leaving you ready to start building your own applications.