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
05. Use Blade components if you don't need Livewire

Episodes

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

Transcript

00:00
If you don't need any livewire functionality there's no need to use a livewire component. Now that might sound pretty obvious but the amount of times I've created a livewire component just to display some details because I think I might need it later are too many to count and again I've already given you the tip here but let's take a look at this in practice and see
00:21
how slow this is if we do use a livewire component when there's no real need to use it. Okay so to start with we're going to create two livewire components we're just going to keep these super basic so let's say livewire make some list imagine that some list is responsible for grabbing some data from your database and iterating through that data and then we're
00:43
also going to create some list item which is a component responsible for displaying that data and potentially has some functionality of its own you might not need to. Okay so let's go ahead and output this in our dashboard some list and inside of some list we're not actually going to do anything we're just going to keep this as a component which we know that we
01:03
are probably going to want to send some data down with or do some sort of functionality inside like sorting now it's where some list item comes in that we need to be careful so this is where we just want to output some data so over in the some list template again let's just mock iterating through some data so let's say range one to a thousand and we'll just say as item and let's go
01:29
ahead and say end for each so inside of here then we're going to within this loop output that some list item and we're going to pass that item down into here whether that's some model data or individual props as we've already discussed in the series so over in some list item.php we're going to accept that item in as a public property that's going to be available in our
01:55
template so we can come over to some list item and we can pretty much just dump out we don't need to div there the item in here which is just going to be a number so let's just take a look at this and there we go we have a thousand numbers inside of here of course that's going to be a little bit slower than we'd normally have because we have you know a thousand items on the page
02:15
which we wouldn't usually do we would have pagination but again this is going to give us a good idea of the memory usage and the request duration as well of course not focusing on queries here at all okay so we are rendering out a single we just come over to some list livewire component 1000 times so if we come over to livewire here we've got a thousand livewire components
02:40
like i said if this particular livewire component didn't have any functionality in it that livewire was useful for then there's absolutely no need to make this a livewire component even if you think you might need it like i've done before in the future so instead what we're going to do if you've come across them is create out a blade component instead
03:02
blade components are pretty much feel like livewire components but they don't have any livewire functionality so we're going to go on the command line and say php artisan make component and we're going to say some list item so that's going to work in pretty much exactly the same way the only thing that we need to change is what switch over livewire for x that's just the prefix
03:24
that we use for any blade components now by running that command that will create two files over in app and view we'll have got some list item created which we can use to add items to our construct or inject dependencies and you can see here pretty much looks like livewire we've got a render method here which renders out that component we're actually going to delete this
03:45
class because we want this to be an anonymous component where we can just pass props through we don't necessarily need that class in there so that component will have been added to views and components and you can see there's already a load here through laravel breeze but we've got this sum list item inside of here so this is the component now where we want to output that item
04:07
or any properties on that item or any of the other props that we're going to pass in and we can explicitly declare the props at the top of the blade component by just using the props directive and just passing through the prop that we're expecting in here so this is now an anonymous component with the props defined at the top that we need to pass in and the data that we're
04:26
displaying so now that we've switched over some list to render out a blade component with the same item being passed in and then being picked up with a prop here is pretty much going to work in exactly the same way now i've deleted that main class i'm just going to go ahead and run php artisan view clear because sometimes it doesn't keep up to date with it and let's go over and see the
04:48
difference so remember we've got 12 meg memory usage a request duration of 361 and of course we've got 1001 live wire components we give that a refresh now of course we only have one live cut wire component which is the overall component for this you can see that the memory usage and the request duration has been almost cut in half in terms of specifically the request duration and
05:11
even lower when it's cached so we're doing exactly the same thing we've just removed that redundant live wire component and you can see how much quicker that this is the takeaway from this is that live wire components do have a cost to them so if you don't need something as a live wire component very very simply there's no need to use a live wire component

Episode summary

In this episode, we explore a common pitfall when working with Laravel Livewire: creating Livewire components when basic Blade components would do the job just fine. At the start, I admit that I've often built out Livewire components just in case I might need interactivity later, only to realize it was unnecessary and wasted effort.

We put this into practice by building an example. First, we make two simple Livewire components: SomeList and SomeListItem. Imagine SomeList is pulling in data and looping through it, and for every item (we mock up 1,000 items!), it renders a SomeListItem component. We see that this means a thousand Livewire components get rendered just to spit out some numbers—no interactivity, no Livewire features needed. Not only is this kind of wasteful, but it's also slow: memory usage is high, and the request takes noticeably longer to process.

To show a better way, we swap out the unnecessary Livewire component for a Blade component. Instead of using <livewire:some-list-item />, we create a Blade anonymous component, which looks and works almost the same but doesn't have any Livewire overhead. All we need to do is use the x- prefix. After switching and cleaning up, we try the page again. The memory usage is cut almost in half, the request time drops, and everything is faster—just because we're not using Livewire where we don't need it.

Bottom line: Livewire components are powerful, but they do have a cost. If all you need is to render some data with zero interactivity, Blade components are just lighter and faster. Only use Livewire when you really need its features!

Episode discussion

No comments, yet. Be the first!