In case you thought islands weren't powerful enough, you can nest them and unlock a whole other pile of functionality. So let's dig into that. We have our page. We're lazy loading this island here of all of our metrics, right? Well before we even talk about nesting, even a single island is kind of a nested island because the main component behaves very much like an island. It's just invisible, right? It's the whole component.

because the main component behaves very much like an island. It's just invisible, right? It's the whole component. Um, and you'll see what I mean in a second. Remember how I said with islands, they will render initially with the page load, but then any subsequent request, you know they will be unto themselves. So if this refresh button just refreshes the island, the island will just refresh. Well, it actually works the opposite way too,

the island will just refresh. Well, it actually works the opposite way too, like we alluded to earlier, where if the entire page makes some update, it is going to skip the island because it's an island. And this is actually a problem. We've had a bug laying here that you may not have caught. If I change the filter to something like today, all of the other metrics changed, but nothing inside the island changed

of the other metrics changed, but nothing inside the island changed because that's how they work. Islands are skipped if their parent renders, the nested island is skipped. Okay, so what do we do about that? Well, there's a simple solution. Sometimes you want that behavior. That's very true. Sometimes you really want the island to be unto itself so that it doesn't cost the rest of the page.

Sometimes you really want the island to be unto itself so that it doesn't cost the rest of the page. But in this case, we kind of, anytime that metric changes, we need this whole island to refresh. So we can say always true. And now when we change this metric, and I'll show you where that is up here, it's just a select with wire model live to a property called period. And this value affects all the stuff inside here. So naturally when this thing changes,

And this value affects all the stuff inside here. So naturally when this thing changes, we wanna make sure that all this stuff changes. So we say, Hey, anytime our parent is rendering, make sure that we are also rendering, okay? So now if I change this, you'll see that everything is hunky dory. Everything changes the way it should. Okay? All the things inside the island are now gonna update. And then if you hit refresh,

All the things inside the island are now gonna update. And then if you hit refresh, this island is still gonna be live. You can see that things are changing and it's not impacting the rest of the component. Great. Okay? Now let's say for whatever reason one of these metrics like views inside here, you wanna make sure that views stays updated live real time. So maybe you want to use polling in live wire to poll so that every five seconds

So maybe you want to use polling in live wire to poll so that every five seconds or something, this value gets refreshed. So you could just add wire pole, but wire pole is kind of dumb wire pole. Like I've seen people get tripped up on this before where they've thought, oh, if I add wire pole to an individual element somewhere deep inside live wire, it is going to pull but only re-render that single element. And that is not true. It's gonna just trigger a whole

it is going to pull but only re-render that single element. And that is not true. It's gonna just trigger a whole refresh of the component every time. In this case, it's gonna trigger a refresh of the island, right? So I add wire poll to views and I open up the network tab and you're gonna see that it is polling requests are being sent, but it's not scoped to just the views, both visitors and average time on post. They are all updating as well, every single time. Okay?

and average time on post. They are all updating as well, every single time. Okay? So what can we do about this? We can wrap this inside of an island, a nested island, and now this pole is gonna hit the island and it's just going to refresh itself. If computed properties and islands are best friends, so is wire, pole and islands, it really adds, I mean really forget about everything else.

and islands, it really adds, I mean really forget about everything else. Most times you're using wire pole, you probably wanna be using islands because they really make them scoped in a really nice way. So now I refresh, it's polling, okay, but only views is being updated. So you watch views. Views is updated, but visitors never gets updated at all because now views are inside a nested island.

but visitors never gets updated at all because now views are inside a nested island. But we have that same problem we had before where if I refresh, let me slow down this pole to really make this point land and be easier to spot. So we make this five seconds, okay? So now every five seconds. So it's taking a long time already. Every five seconds views is going to update. So there we go, it just updated.

Every five seconds views is going to update. So there we go, it just updated. But if I click refresh the visitors an average time on post updates, but views does not update. So I'll highlight it to show you and then I refresh and well it updated because it had its own poll, but we have the same problem that we had before. Is that because this is truly an island now whenever we hit a refresh button to refresh this whole bit, only these two get refreshed

whenever we hit a refresh button to refresh this whole bit, only these two get refreshed because it's gonna skip that island. So what do we do? The same thing we did before. We say always true. And now anytime any of these parents get changed always. Well let me rephrase that. Anytime a component has or an island has always true on it, it will render when its parent renders.

or an island has always true on it, it will render when its parent renders. So if this whole parent renders, it's gonna hit always true and render this, it's gonna hit always true and render this. If just a, an event or something is triggered inside this one, it's only gonna render this one. If an event is triggered inside this one, it's gonna render this one and then this one. Does that make sense?

it's gonna render this one and then this one. Does that make sense? You create a Russian doll and when you add always true if, if islands are Russian dolls, when you don't have always true, they're all just still islands, they're totally disconnected. One request is separate from another one, render is separate from another.

One request is separate from another one, render is separate from another. But as soon as you add always true, you're linking them all together. So you're saying that now when the outermost one changes, it renders through the whole Russian do, but when the inner ones change, they still only render themselves. So this is a different mode. It may be confusing right now,

So this is a different mode. It may be confusing right now, but once you start playing with islands, these are you utilities name lazy and always, and you learn how to mix and match them because they each have their own affordances and powers to unlock very specific use cases. Like we've already seen many use cases where we want them and don't want them and can mix and match them. So there we go. I think this is a pretty powerful thing

and don't want them and can mix and match them. So there we go. I think this is a pretty powerful thing where we have this page that loads instantly a part of it is lazy. Everything stays totally reactive. I can click this refresh, I get this changing. This is pulling the whole time. If I change this to today, it changes the entire page at the same time. Like everything still feels totally reactive.

it changes the entire page at the same time. Like everything still feels totally reactive. And if you're a user using this app, you have no idea about islands yet. All you're just using it and everything is staying super reactive and live and fast. So that is the power of islands in a nutshell. There's one more thing we need to cover, kind of a stretch goal. I'll see you there.

kind of a stretch goal. I'll see you there.