Pulling Content Up with children

[00:00:00]
>> This is another version of that original tree chart that we saw, nothing special here. But there's a counterintuitive edge case, and I am spiritually prepared to answer questions on this. Because when I first learned about this, words have meanings, and I'm about to use two of the same word in totally different meanings, but I'm here for it, right?

[00:00:25]
I will repeat myself as many times as I need to, cuz I needed it myself. So this is what we think of, which is parent components re-render their child components. I'm not using the plural on purpose, right, which is here, we've got the parent one that passes down props.

[00:00:43]
And maybe that middle one doesn't even care about the props. I'm uninterested in them completely. Actually when I was working on one of the apps I saw, I just left the bug in there, right? Some of these, I just left them there because I was, that's the thing I talked about earlier, and I see it re-rendering.

[00:01:04]
But then it would pass to that child and then it would pass it down to the one that actually cares about it. And that's what we've seen the whole time, that's what we know and we love, right? But what if we parsed the gates, right? When a component takes children as prop, those children, I understand what's about to happen here.

[00:01:29]
When a component takes children, those children are not as child, right? It's a slot where the parent component can render stuff in the middle, right? So basically you can skip that middle one in this case, right? You have some of that intermediary component, the children slot, which still belongs to the parent, right?

[00:01:51]
And then you have the rest of it, right? So it doesn't trigger the tree all the way down. So it's another way that we have pushing our content down. And there's also the ability to lift up the thing that if the grandparent and the child care about something, and the parent is in the way, you can use the children slot and the parent to kinda just have a direct line of communication from the parent to the child.

[00:02:18]
>> Similar to a context?
>> No.
>> No?
>> Who wants the context in here so badly?
>> No, I'm just trying to understand.
>> We'll see it in an example in a second. But I might have to stop and pull up a different branch in a second, but I can show it to you as well.

[00:02:37]
But, Yeah, it's in the exercise, and I think I have another branch of the packing list so I can show it. I just need one second to find it. But yeah, the idea is, so here, I have these reminders that I put in the middle, right? They've nothing to do with the items, but they show up in between the input and the rest of the packing list, I just gotta switch over that branch.

[00:03:01]
And so they got a rerender, because you're like, they gotta be in the middle. What am I gonna do, right, if the new item name, they got to have the highest common denominator? We can still actually pull up the ability to put it in there as well. Let's look at it in code cuz saying the word child and children 17 more times, I don't imagine it's gonna be particularly helpful, right?

[00:03:24]
So let's look.