I'm gonna show you something that existed in Livewire three, not at launch. We just added it at some point, but I don't think a ton of people know about it. So let's just call it a V four feature for fun. Uh, just so I can remind you that it exists and it's really powerful. So this page that we have, we have all these posts and we added this bulk action thing where you can select something and then this two selected,

and we added this bulk action thing where you can select something and then this two selected, and then a delete button shows up. Well look at this. Every time I click a checkbox, a whole request gets sent to the server. And this is really fast because it's, you know, it's just local. But let me refresh and make it slow. So slow four GI click the checkbox

But let me refresh and make it slow. So slow four GI click the checkbox and now there's a request out and it takes a little bit of time until that bulk action toggle shows up and it just bugs me a little bit. It feels a little bit wasteful. So I wanna show you a way that we can achieve the exact same experience, but make it instant and fast for users

that we can achieve the exact same experience, but make it instant and fast for users and not send requests to the server at all. So the reason that those requests are being sent is wire Model Live. And this is really useful for like real time search or something like sort by where you're sorting by something else when you're doing sort buys. Of course you need it to be wire model live because of course you need to send a network request

Of course you need it to be wire model live because of course you need to send a network request to re-sort everything. But something like just toggling a little bulk actions thing up here doesn't feel like it needs a whole request. So let's just kill the.live part. Okay? Now I can select them, no request gets sent at all, but we don't see the bulk actions up here and that's because we're using PHP. We're using Blade to detect and render this whole thing.

because we're using PHP. We're using Blade to detect and render this whole thing. We're using Blade to make this a conditional. So let's remove that and I'll show you some live wire stuff that we have access to. So the first one is wire show. Wire show is a way to say, Hey, show this. If a condition is met and you have access to your live wire component

If a condition is met and you have access to your live wire component state right inside here. So we could say, if selected length we're in JavaScript now is greater than zero, then show it. So it's gonna be hidden by default, and then when I click it, it shows up, okay, we have some problems. The first one is, if I refresh fast, you can see it's a flash of un styled content, FOUC.

The first one is, if I refresh fast, you can see it's a flash of un styled content, FOUC. You can see that it blips on the page for a second until live wire's, JavaScript boots up and evaluates wire show to know to hide it. And this is just like if you're familiar with Alpine or View, there's V Show and when you're using it, you get that same problem. So in view or Alpine, you would use X cloak to say, Hey,

So in view or Alpine, you would use X cloak to say, Hey, make this thing invisible until the page is loaded. Well, live wire has the same thing. You could say wire cloak. So often when I'm using wire show, it's traveling alongside wire cloak, which just hides it until the page is fully loaded. So now we don't see it at all. There's no flash of un style content. It feels really clean

There's no flash of un style content. It feels really clean and it shows up instantly with no fetch requests at all as we interact with the page. But as I select more, it still says zero selected because that was rendered with Blade. And this is where wire show's little partner comes into play, wire text, you can say wire text, and then any property. So in our case, we'll say selected length

and then any property. So in our case, we'll say selected length because this is JavaScript. Okay? And now if I click this, it says one selected, two selected, three selected, no fetch requests at all. It's just as efficient as if you wrote this inside something like React. Nothing is, you know, there's no cost here. It's just instant, it's JavaScript, it's an optimistic ui, and then we can still hit delete

It's just instant, it's JavaScript, it's an optimistic ui, and then we can still hit delete and it's gonna do its whole thing. So that's just something I wanted to touch on. Wire show, wire cloak, wire text. Really powerful for tiny little toggles like that. And there's a lot of them, but this is how your app can start to feel slow and people go, oh, live wire is really, really good for getting up and running with an app quickly.

and people go, oh, live wire is really, really good for getting up and running with an app quickly. And it's easy for developers, but then there's things like this drop down or this toggle that just feel laggy where if I build it in react, this wouldn't happen. But we have a lot of those same affordances with wire show, wire, cloak, wire text, and even a bunch more with the new V four JavaScript stuff that we'll get to towards the end of the series.

and even a bunch more with the new V four JavaScript stuff that we'll get to towards the end of the series. Um, but there you go. Just wanted to touch on it. Enjoy.