So we added a single island around this views, metrics right here. Okay, we refresh it, it just re renders that single view. Well, let's add visitors an average time on post islands and see how we can kind of link them together. We're gonna add another tool to our islands tool belt. Okay, so Paige's analytics metric for visitors right here. Let's wrap this inside of an island and then this one metric for average time on post down here. We'll take this and we'll put this inside of an island.

and then this one metric for average time on post down here. We'll take this and we'll put this inside of an island. Okay, so now all three are inside of an island, but we don't, we can't really do anything with it 'cause we don't have refresh buttons over here. So let's do that. We're gonna add one here and we're gonna add one down here. And now we're gonna see those little buttons inside of all three of these islands. So I can click visitors

of all three of these islands. So I can click visitors and it's only gonna refresh visitors views, only views, and average time on post only. Average time on post. This may be fine, you can stop here, but maybe you want them all to be linked. You want views, visitors, and time on post to always travel together. And we can do that. We can link islands together if you have multiple on a page with the name property.

And we can do that. We can link islands together if you have multiple on a page with the name property. Okay, so watch this. I take all three islands and I give them a name and I give them the same name. And now what I've just told Livewire is these islands always travel together, okay? You can take two completely different parts of your component and make sure that they are linked together by giving them a name

of your component and make sure that they are linked together by giving them a name and making sure that it is the same name. So watch this. Now if I click one of these, they're all going to refresh because they always travel together. Okay? So this is useful for all sorts of reasons, but right now I have like three buttons and they all do the same thing, which feels a little bit weird.

and they all do the same thing, which feels a little bit weird. So let's drop these refresh buttons and put a separate refresh button out here so that we just have one button that refreshes all of those islands. Okay? So let's add the button down here, refresh all. Okay, and then each individual refresh, we're just gonna kill. Now look on the page, we have this refresh button over here

refresh, we're just gonna kill. Now look on the page, we have this refresh button over here and then no refresh button inside the components. So you might end up doing this and think that this is fine, it's not fine. And you'll see why. I'll show you in a second. But you could probably almost intuit why? If you look at the markup, you'll see that this refresh button down here, this wire click refresh live Livewire is gonna look

that this refresh button down here, this wire click refresh live Livewire is gonna look and see, Hey, is this button inside of an island? No it's not. Well then just re-render the whole page like a normal refresh button. It's not inside of this island. So we're gonna get some interesting behavior. I click refresh and it appears that nothing happens. But if you look at the dev tools, something does happen, it does refresh the page.

But if you look at the dev tools, something does happen, it does refresh the page. The reason it, it doesn't look like it takes a long time is because the page is really fast. These are the slow metrics, these are the aggregated data. The rest is fast, hit refresh, and it's like instant. So this is something that is really important to notice that the views, the visitors and the average time on post are not changing at all. And this is how islands work.

and the average time on post are not changing at all. And this is how islands work. Not only when a, when a request happens inside of an island, does it just re-render that island, but when a request happens outside of an island, it doesn't re-render nested islands unless you do something special, which we're gonna get to. But for now, I just want you to know that, that if you put this on an island, it's truly on an island. If you do anything in the main component outside

that if you put this on an island, it's truly on an island. If you do anything in the main component outside of the islands, it is going to skip over the islands when it re renders the component. That's a very powerful feature of islands. But in this case, it ended us in a weird situation where, wait, this refresh button is outside the island, so it's not actually changing the islands, but I want to tell Livewire this button belongs to those islands.

but I want to tell Livewire this button belongs to those islands. So how do we do that? There's a new directive called Warrior Island. So you can say Warrior Island and then pass in a name, and now you're saying, Hey, live wire. Whenever this action is clicked, it could be wire click, it could be wire model, live, whatever, any, any action that's triggered on this element is now going to be associated with the metrics island.

that's triggered on this element is now going to be associated with the metrics island. Okay? So now we hit refresh like this, boom. And it works. It's dedicated just to that island. So this is useful for all sorts of reasons, but you'll find that you often end up in these situations where you have something outside of an island and you want it to control that island. And that's where wire Island comes into play. So named islands are incredibly

And that's where wire Island comes into play. So named islands are incredibly valuable when you start having like different islands on a component. You need to link them at some point and you need to control them from something else. It's a really important utility and I wanted to make sure that you really understood named Islands. Let's keep going.

named Islands. Let's keep going.