For, Index, & Portal

[00:00:00]
>> Let me show you For next, cuz For is one of my my favorite. And yeah, what are we doing here? Yes, we have a list of data that it signals. Apparently these are CATS. And we want to actually iterate over them and show this list of CATS and a link to them in the UI.

[00:00:25]
So essentially, For is the way we do this. The syntax for For is here, let's do this. Okay, and then for each CATS and then CAT and I. And there's a reason I'm showing this cuz there is something special about the way that we handle indexes, okay? Let's get this specific data.

[00:01:11]
First of all, CAT is going to just be the item directly. So in this case, it is not a signal being passed in. So we need to change this up a bit so garfield is gonna be just our CAT who has a name, right? But interestingly, Our index I, is a function, is a signal, and you might be wondering why is that?

[00:01:43]
Well, it's because if you think about it, the list is keyed. So the item itself can never change for those DOM nodes. But it can change position in the list. So the index can change. And this kind of helps you understand a bit how Solid renders because it means that as we add items to the list, we never rerun that function for the items that already exist, right?

[00:02:07]
We might update the index and cause this specific text node update, but we're never gonna rerun the items that we've already created. So for this reason the index is the only thing that can change, so it's a signal where the other one is not. And as you may have guessed for the index component, it's actually the opposite, which is why there's two components and why we didn't just roll these into the same thing cuz index each CATS and I'm gonna.

[00:02:49]
All right, When we do it this time, get little, We pass in our CAT and I. While it's very similar, the difference this time is now CAT is a function with a name, it's a signal, because the item can change but the index never changes. And in this case, this is simply just i plus one.

[00:03:32]
So Little subtle difference here, but if you think about it from an optimization standpoint, it actually makes a lot of sense. I admit 90% of the time you're just gonna use For you're not gonna use index. It's very special cases where you're gonna use index. Keyed is good, there's a reason why frameworks complain at you when you don't put your keys on there.

[00:03:54]
Every framework needs to be keyed, there's no exception. If a framework doesn't have keyed and they're not complaining at you they're just not warning you about something that's actually a real concern. But this is control flow essentially in Solid. One other one that I did not show off yet, because it's kinda specific.

[00:04:15]
Let's see, what did I show here? Yeah, I mentioned suspense already, which we'll cover later. But we also have portals. Portals are.
>> Is there any way you can bump the font.
>> One more, yes. Portals are a way of basically moving elements out of the main flow.

[00:04:40]
This is helpful for things like modals where you wanna be able to Insert stuff like higher out of the z-index order and just like not have to worry about in the normal flow. And for that reason, we chose an interesting API. We chose to go with components cuz everything in Solid is a component.

[00:04:58]
So essentially, in this example, we have some text and we have this kind of pop up, but it's like all part of this kind of same thing. And what we're gonna do is we're gonna say actually, we want this pop up to be in a portal. So we're literally going to move it here and do this here.

[00:05:21]
And the example a little bit small here, you can't see it. But yeah, essentially we've pulled it out of the flow. It's easier to see this when you actually look at the the DOM here, but you know it. I think you guys will trust me when I say that this is now inserting the portal.

[00:05:40]
Well, you know what? Never mind. Let's see if we can actually do this. Dom, div="app", "app-container". You can see that it's now been pulled out from the rest of the app. Essentially, we have just some text inside a div and then the portal is over here, right?

[00:06:10]
Sorry, I know this one small after bumping up the text size. I didn't actually help with this but essentially it's been pulled out of the flow. So useful for modals. You can also do stuff like set what the mount element is. You can insert basically anywhere you can even insert in the head with it.

[00:06:26]
So it's a very powerful mechanism that's very web centric. The other control flows that I covered work on any of our platforms they work on native or they work in WebGL or whatever whereas portal is very specific to the platform that you're on.