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
03. Cached computed properties

Episodes

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

Transcript

00:00
We're now going to talk about computed properties in LiveWire, which we touched in the last episode. We're going to see how these can not only clean up our code, but also make things a little bit quicker. This relates to mainly to database queries. So we're going to go ahead and create out a dedicated component,
00:16
almost like a confirmation for deleting an employee. So let's go ahead and run phpArtisan LiveWire make and let's just say employee delete. Okay, so let's go over to our dashboard, add this to our dashboard, and then we can get started. So LiveWire employee delete, and of course we won't see anything, but our component is now there.
00:41
Now the first thing we want to think about is from the last episode, do we want to pass the entire employee object through to here? Well, to be honest, this would be absolutely fine. This is a component that's just shown individually on a page.
00:54
Of course, passing an entire employee object through to this would not matter, but I'm going to go ahead and pass the employee ID for the purpose of this, just so we can create that computed property to grab the employee out of the database. So at the moment, of course, we don't see anything,
01:10
but over in employee delete, which we're going to open up now, we can go ahead and accept this in. And first of all, we're going to go ahead and perform a query to actually show the details of the employee on this template. So let's go and create out that public employee ID property.
01:27
And inside of the array that we pass through to our view, we're going to pass through the employee by looking them up in the database. So employee and find, and this employee ID. Great. So let's pull the namespace in for employee.
01:44
And now over in the employee delete template, we can pretty much access anything inside of here. Are you sure you want to delete and let's say employee name, like so. Great. So that's pretty much our component. Of course, we've performed a query here because we are grabbing that employee by their ID.
02:08
That is obvious. But now what happens if I want to go ahead and create out a button here to delete this employee? Well, let's go ahead and just say yes. And let's just check out the design of this.
02:18
It's just on the end there. So I'm going to go ahead and wrap this in a paragraph tag. So it's a little bit more obvious. And when we click on this, we want to go ahead and confirm the deletion.
02:27
So let's say wire click, delete employee or confirm whatever you want to say. OK. So over in the component here, let's create this method out to delete this employee. Delete employee. And of course, here, what we're going to need to do is look them up in the database again.
02:44
So we're pretty much going to go ahead and copy and paste that code over. And then we're going to see how a computed property can clear this up for us. So let's just die dump on that employee just to make sure that's working. And let's go over.
02:57
Hit yes. And there we go. We get that employee dumped. Now, if we get rid of the die dump and just hover over the debug bar,
03:04
if we hit yes, you can see that we've performed another query. So this is not a massive deal, but we can improve on this. So we've got two duplicated queries because we have clicked yes. If this was any other action which required you to use that model over and over and over again,
03:19
of course, you would create more and more queries. And you can see here that if we just go up to each of these requests, each of these requests as we press that button is performing two queries. Now, the reason that each request is performing two queries is because
03:36
render or the component is being re-rendered. So we're looking the user up again. And then we're performing this query here to find the employee again. So every single re-render of this component after we click the button
03:49
as the side effect of clicking this button is performing two queries. Again, not a massive issue, but we can improve on this. And it's always good to improve on things even if they're very, very small. And of course, one database query can add up to thousands
04:02
depending on how many people are using your app. So what's the best solution? Well, it's to use a computed property. We've got the employee ID in here,
04:10
so we can create our computed property and access the employee that way. And then we'll take a look at why this is a faster solution. So let's change this or let's create a completely separate method in here called getEmployeeProperty.
04:28
So with computed properties in LiveWire, we prefix these with get and we add a property suffix on the end. And this ends up the name of the computed property. So now we're doing this in two places.
04:41
So let's go ahead and grab this out from here and pop that into there and return this from here. We can actually type today. And then down here, we can do exactly the same thing.
04:54
Get rid of this. So how do we access this? Well, just like a property. So this employee and then here, this employee.
05:03
And of course, you wouldn't assign it here. You would probably do this employee and delete. But we'll just assign it just so we can get the benefit of the re-render to see what's happened.
05:12
So technically, we're thinking we're doing the same thing here. We're just calling this from the same place. So surely, we're still going to have this called here when we re-render. And this is going to be called when we press that button.
05:25
And it's going to perform two database lookups. Well, the reason that this isn't the case is computed properties in LiveWire are cached. So once we have grabbed this employee property once,
05:38
that's going to be cached. And the same result will be returned when we access this again. So the first access of this is when we render. Then the second access is when we delete the employee.
05:49
And then any subsequent re-renders will just use this cached property. So let's go over and see the difference here. So we've got one query, which we expect. We're always going to perform that query to look the user up by their ID
06:01
or the employee, in this case, by their ID. But when we click Yes now, you can see that we're not performing an additional query. We're only performing this once.
06:10
So we're doing this for every single request because the re-render requires this to be pulled out. But we're only performing one query and not that duplicate. So we can pretty much use this again and again and again.
06:23
Now, the interesting thing is we can also do this in templates. So if we just come over to our employee delete template, rather than say employee name, we can say this employee name.
06:34
That is the computed property. Let's go over and give this a refresh. And that's the computed property on that employee. And we can just do this for any single property that we have,
06:44
for example, the ID as well. So again, we're accessing that computed property twice here. But because it's cached, we can use it in our template as much as we want
06:54
without it performing an additional query. So again, we're only performing one query now for every re-render of this component rather than two, effectively cutting our query count in half.
07:06
And we don't have a duplication, which is the most important thing. So when you're doing things like this, particularly combining this with things like
07:14
passing in an ID into a component where we want to look the model up inside of the component and not pass the entire model in, computed properties like this really, really help.
07:24
As long as you just make sure you monitor your query count, that you're not using too many queries, then you're good. So creating computed properties which are cached can be beneficial to reduce our query count.

Episode summary

In this episode, we dive deeper into computed properties in Laravel Livewire, building on what we discussed previously. We start by creating a new Livewire component for confirming the deletion of an employee. Instead of passing the entire employee object, we pass just the employee's ID to the component, then use that ID to look up the employee in the database. This sets us up nicely for the main topic: cached computed properties.

First, we take the straightforward approach—querying the database both when rendering the component and when handling the deletion action. We quickly spot the inefficiency: each render and each action trigger a new database query, which adds up, especially in components where you'll need to reference the same model multiple times.

To solve this, we refactor to use a computed property. We implement the getEmployeeProperty method in the Livewire component and show how it automatically caches the retrieved employee model for the entire lifetime of the current request. Now, we can reference this->employee anywhere in our component or view, and Livewire ensures it only does a single database query, no matter how many times we access it.

We wrap up by showing you how to use this computed property directly in your Blade views, and how it pays off by keeping your code cleaner and your database queries minimal. The big takeaway: use computed (and cached) properties to reduce duplicate queries and keep your Livewire components efficient!

Episode discussion

No comments, yet. Be the first!