Livewire Performance
This episode is for members only

Sign up to access "Livewire Performance" right now.

Get started
Already a member? Sign in to continue
Playing
04. Deferred model properties

Episodes

0%
Your progress
  • Total: 1h 22m
  • Played: 0m
  • Remaining: 1h 22m
Join or sign in to track your progress

Transcript

00:00
Deferring model properties is one of the easiest changes you can make to reduce the amount of requests sent to your application, particularly within forms. To demo this out, we're going to go ahead and create out a Livewire component, which would mock creating an employee, or pretty much anything in your app. So let's go ahead and say Livewire Make, and we'll say Employee Create. We're not going to fill this out completely, but we'll just add one field in here.
00:26
So Employee Create, and this is just going to be a form, so let's create a form out in here. Get rid of the action, and let's go ahead and add an input here with a type of text. We can get rid of name and ID as well. Okay, so we've just got a really simple form in here.
00:42
Let's add this to our dashboard so we can see it. Employee Create, and there we go. That's going to be the employee's name that we start to type in. So we're going to monitor the amount of requests that are being made to our app as we type into this when this is bound to a Livewire model.
01:01
We'll talk a little bit about what's going on behind the scenes as well. So over in Employee Create, you're going to hold inside of here all of the form data. So these could be public properties. It could be an array of data, for example, like this, if you wanted to, if it was a bit easier.
01:17
But let's just stick with one single public property called name. So we can hook up that form item over in Employee Create to that name, and that's going to represent, if we just dump name out on the page, the value that's being typed in. So as I type Alex, you can see we get that value back in here.
01:40
Now, because Livewire is taking the data that we've entered into this input, and it is matching it up, if you like, with the value inside of here, it has to make a request to the backend to put that data into our backend component. So what's actually happened here is as I typed Alex with, of course, four letters in,
02:02
it made four requests to our backend. So that's four additional requests to our backend just to fill in this form information. And that's not great because if we were typing huge amounts of data into here, clicking lots of checkboxes, we're making a huge amount of requests.
02:20
And this isn't always necessary. If you have some sort of frontend validation, then you wouldn't want to make all of these requests to your backend. So the simple change that we can make here is over in Employee Create on our model is use defer. Now, let's take a look at what happens now we've added the defer modifier to our model.
02:43
Remember, we're outputting the name here. We won't see that anymore. So if I type in Alex here, you can see, sure enough, we don't see that value. We've not made any additional requests to our backend. So we've saved four requests in this case and more if there was more data in here.
02:59
But where's that data now? How are we actually going to get that data in here? Well, let's create out a method in here that would create an employee. So we're not going to do anything in here at the moment. We're just going to hook this up to our for. So let's go ahead and say wire submit prevent and hook that up to that method.
03:21
And of course, we'll create a button in here with the type of submit to create that employee. And it's just wrap this so it doesn't look terrible. There we go. OK, so let's go over now and type in Alex again. We're not making an additional four requests just to keep this data up to date.
03:41
But as soon as we hit create and perform another action, that's going to go ahead and send another request through. And there we go. So now we've hit create. What has then happened is it sent one request to take that data, send it through. And now we have it all in one go rather than for every single character that we type. So we can still inside of create employee use that name if we just die dump on it to prove that it is there.
04:08
Although we pretty much know it's there because it's a public property that we're outputting here and we've seen it. You can see that we can just type anything inside of here, hit create. And now we've got that data that we can then use to create the employee in our database. So a very, very simple change by just adding defer on here.
04:26
But if you don't need this data to be constantly sent through and accessible in the LiveWire component, e.g. you don't need to watch it or anything like that, and you just need to type in the data, then hit a method to grab that data all in one go, then adding defer is a really, really good option. And that's something that you can very easily add to pretty much any form you create.

Episode summary

In this episode, we dig into how deferring model properties in Livewire forms can reduce the number of requests made to your backend. We start by setting up a simple Livewire component for creating an employee, focusing on just a single name field for simplicity.

We then walk through how Livewire typically makes a backend request on every keystroke when using standard model binding, which can quickly add up if you're typing longer names or dealing with bigger forms. To fix this, we introduce the defer modifier, showing how it prevents those constant requests and only sends the data to the backend when you actually submit the form.

You'll see a hands-on demo comparing the two approaches and some explanation of what's happening under the hood. Finally, we wrap up by highlighting when it's best to use defer and how this simple tweak can make your forms way more efficient without sacrificing any functionality.

Episode discussion

No comments, yet. Be the first!