Sign up to access "Learn Livewire" right now.

is making too many network requests. Now, if you want to take this a step further, what you can actually do is transfer some of this load over from making requests to your Livewire component to doing everything just with AlpineJS.

This is completely optional. I'm going to give you an example of one way that we can improve this within the application that we've built. We're not going to directly change it, but we're

going to create a separate component to demonstrate how you could do this. So one of the things that we could do better in this application is the edit toggle. So we know that when we press edit, if we just

take a look at our code over in our book item, we have that edit here, which we are toggling. Now, we're toggling a Livewire property. And if we open up our book item, that is sending a network request

through because it has to set this value and get back a new state. Now, I'm not going to change it here because it's going to involve changing a little bit too much around. But if you were starting from scratch, here's an alternative.

So let's go ahead and create our new component. So I'm going to say phpArtisan Livewire make. And we're going to say we'll call this toggle example. OK, great.

So I'm going to pop this over on the dashboard just so we can demonstrate this Livewire toggle example. And let's just fix that up. OK, so our toggle example blade file will

have some sort of container which is hidden by default. And then we'll have a button which we can click to show this button or show this section. So let's do this in the standard way that we would do it, first of all.

So when we click on that button, we want to toggle. Let's call this editing because then it kind of relates to what we're doing. So editing state is here.

And let's go ahead and say edit. OK, great. So we'll head over to the toggle example file here. And we know that we're going to set a Boolean on here

called editing to false by default. So pretty much what we did before. And then we're going to toggle that. And then in here, we're going to have an if statement to check if editing is true and show that if not.

So we've already covered this. It should make sense. So if we come over and I hit Edit, sure enough, we toggle the editing state or, in this case, just our fake example.

OK, so how can we get away from sending a network request to Livewire to actually get this to work? So let's open up our Network tab and check this out. Hit Edit.

We send a request that gives us the new HTML back with this state. And then we render it. But we can do this without that. So the way that we do this is just use Alpine directly.

So that does not involve having a editing property in here. It doesn't involve doing an if statement here. And it doesn't involve a wire click because we're not doing anything to do with Livewire.

What we can do is we can have this editing state in here but have an overall component within Alpine.js to make this work. So for our data here, we're going to set editing to false. So kind of like what we're doing with our Livewire component,

we're just transferring this down to the client level only. And then with this, we're going to set this to only show when editing is truthy. And then with the button, what we can say is x on click editing.

And we can set that to true. Or we can set that to the opposite of the value it is, thus creating a toggle. So just moving this data down to the client level means we just don't need to make any requests to Livewire.

This isn't always desirable. But for something like this small toggling something, it can work. So when we refresh the page, you can see sure enough we don't see that. When I click on Edit, we see editing state popped up like we had down here.

But as you can see, we're not making any network requests. So this isn't the end of the world. It doesn't matter if you're toggling state with Livewire and sending an additional request down.

It's really not going to make that much difference to the performance of your page. But if you're doing a lot of this, or you really have a performance critical application where you need this to work,

or you need it to look a little bit smoother, or you need to introduce transitions, then using Alpine directly to toggle parts of your HTML is a really good solution. And this is how we do it.