This episode is for members only

Sign up to access "Livewire Performance" right now.

Get started
Already a member? Sign in to continue
05. Use Blade components if you don't need Livewire


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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
11 episodes1 hr 22 mins


Building powerful apps with Livewire is a breeze, but as your app grows, you may run into performance issues. This series covers tips and techniques to keep your Livewire apps speedy.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!


No comments, yet. Be the first to leave a comment.