So you have a live wire component in your application that's getting bigger and bigger and bigger. And there might be parts of it that are kind of like little individual pieces that make really expensive database queries or something. So you're slowing down your entire component because of one small part of it. And the traditional advice for this is while you extract that to a nested live wire component so that it has its own lifecycle

that to a nested live wire component so that it has its own lifecycle and you can do things like lazy loaded and whatever, and that's fine, but there are some trade-offs there. Like for one, you have to put it all in a separate component with its own lifecycle hooks and things like that. And you probably have to pass props down into that. And then you have to dispatch events back up if you want to do something from that component. So there's a lot of uh,

to do something from that component. So there's a lot of uh, extra work involved in extracting a nested component. And sometimes it just feels like a little much like wouldn't it be nice if you could just take a part of a component and put it on an island? So this is a new feature that I'm so excited about in V four. Let me show you. So here's this analytics page that I have here.

Let me show you. So here's this analytics page that I have here. It's just a bunch of aggregated data from the database about our posts. So views, visitors, average time on posts and some other stuff. Okay? And we'll look at the components. So this is the code for it. It's very straightforward. It's a giant pile of computed properties. So views, visitors, average time.

It's a giant pile of computed properties. So views, visitors, average time. These are all computed properties in live wire. If you're not on computed properties and using them, use them. They're very useful and you'll see why they're very useful in a second. Computed properties are really the key that unlocks islands and you'll see that. Okay, so we have these computed properties, then a bunch

that unlocks islands and you'll see that. Okay, so we have these computed properties, then a bunch of blade, and inside this blade I have a blade component analytics metric where I pass in to number, I pass in those values, this arrow views, that's the computed property visitors average time, those get rendered right here. Happy days, right? Okay, well I put a little bit of slowness into these queries,

Okay, well I put a little bit of slowness into these queries, so if I refresh the page, it takes a little bit. If I try to filter the page, it takes a little bit. You see that? Okay. So let's add a feature to start to start showing you islands. There's a lot we're gonna cover, but I wanna start in the most simple, simple bear way we possibly can.

but I wanna start in the most simple, simple bear way we possibly can. So you're on this page and you just submitted a new post and you're really excited and you wanna see the views go up. So you sit here and you don't wanna refresh the whole page. You want a little refresh button that you can just click and it just refreshes the views. Okay? This is about the simplest use case I can think of. So we're gonna put a refresh button here, flux button with an icon, and let's look at that.

So we're gonna put a refresh button here, flux button with an icon, and let's look at that. Okay, so there it is right there. We click it, it does nothing 'cause we haven't wired it up. So let's say wire click refresh. Okay? And now we have this on the page. I click it, it works, but it refreshes the entire page, right? And that's like pretty slow. And what we wanna do is just refresh this individual

And that's like pretty slow. And what we wanna do is just refresh this individual little part of the page. Okay? So this is how we do it. We wrap it in an island. So let me get my little snippet for that. Okay? Islands are just blade directives at island and End Island, okay? The simplest way to use 'em is literally take a chunk of your component, wrap it in an island. That's it. That's all we've done right here. Okay?

of your component, wrap it in an island. That's it. That's all we've done right here. Okay? I'll walk you through it in a second, but just watch what happens. Now notice this is 1 8 5 8, okay? This is 2 6, 5 7. I'm gonna click this and only this is going to change. Nothing else on the page is gonna change. I click it. Ooh. And it was a lot faster. So notice that this is changing, but nothing else is changing.

So notice that this is changing, but nothing else is changing. So what's happening here? Islands are pure islands At compile time in live wire, we extract a big whatever's inside of this. We extract it into a separate blade file so that if a, if a, an action like wire click, refresh happens inside of an island, Livewire knows it goes, Hey, this refresh happened inside this island. So send a request to the server to re-render the component,

this refresh happened inside this island. So send a request to the server to re-render the component, but only render this piece of the blade view and nothing else. It never touches anything else inside the file. Just its own little island segment, which is so powerful. It makes it so that you're not rendering everything on the backend. You're not sending everything over to the front end and re rendering everything on the front end.

You're not sending everything over to the front end and re rendering everything on the front end. You're only doing exactly what is inside of that island. And I alluded to this earlier, how computed properties are so important for islands because computed properties only run when they're accessed. So if you think about it, when we hit refresh and then Livewire said, okay, we're gonna refresh, but we're from an island, so we're only gonna render this chunk.

but we're from an island, so we're only gonna render this chunk. Well, it renders this chunk, it hits this arrow views, it goes up here, it makes this database query, and then it's done. It returns that HTML to the front end and all of this other blade in here never gets touched. So that means visitors never, never gets called, average time never gets called. So the more you take expensive things

average time never gets called. So the more you take expensive things and put them in computed properties so that they're evaluated just in time, then you combine that with an island and now you have something really special with just at island. So there's so much more to cover about islands, but I wanted to show you how even just the simplest at island, wrapping a piece of your component can be an extremely powerful pattern.

island, wrapping a piece of your component can be an extremely powerful pattern. So let's keep going.