Sign up to access "Livewire Performance" right now.

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