Pulling Content Up Exercise

[00:00:01]
>> All right, so a product manager came in and they're like I love what you did with the expensive component down at the bottom. But turns out design really wants it right in between those two pieces, right? They want to write in between the color swatch and the guessing, right?

[00:00:24]
So the immediate way that we would normally do that, which is, again, a completely reasonable way to do it if this thing wasn't a problematic component, right? In a real world I love the case of rendering a 3JS thing. That's a thing that you don't want to do too often, right?

[00:00:40]
We've got to put it in the middle. So obviously not great, immediate thing that we would do especially it's like, imagine you were not the developer that push that state down previously. You're like, it needs to be in the middle. And let's say it wasn't called expensive component.

[00:00:59]
Like with an obvious issue. You might be like, well, okay, cool. Here's, I'm gonna do, I'll just go into my game. And I'm gonna put it right in there. Just like the design team asked for. And everything's gonna be great. And yeah, those of us who worked on the original feature, we know that that's literally the problem that we just solved two sprints ago.

[00:01:23]
And here it is again, but it's gotta be in the middle cause that's like the new, product forms, right? So it's like we gotta put it there. And okay, cool. I don't remember if it, which one of was in between, but like the point doesn't really matter. Application once again, ridiculous.

[00:01:40]
And so is it just that we tell like this comes out, do we do that thing where we have to figure out which hill we want to die on when we like push back on product requirements. Or again, the name of the game here is like not immediately reaching from memo just using an understanding using React before we pull for all these tools, right so yes, I understand.

[00:02:03]
Also you put memo on this one. But doing that all the time adds up and pays its own cost. It's like every all your performance problems normally were caused by like a bunch of things that didn't really matter. It's fine except my pull request the Sprint's ending tomorrow.

[00:02:21]
And like the same thing happens with 1000 memos over time, trust me. So, we wanna take this technique where we then, we want it to show up in between those two parts just like design ask for. But we wanna actually follow the rules and react component hierarchy and not have it rerender every time the state happens here, right?

[00:02:44]
And so the way that we do this is kind of like, as words aren't great for but hopefully that the chart will make more sense I like ratio which you have to words. We try to part this game component for a place where I can put it in between those two things, but actually spiritually keep it up top where I wanted it before, right?

[00:03:04]
So we basically want to show it in between the color swatch and the inputs or any of those two components. But as far as React is concerned isolate it just as we did earlier. So what we do here is we would not put it in this component because that is just literally undoing We're going to refactor in every way possible, but we'd say is like, hey, game component.

[00:03:26]
Don't worry about what happens in here. It's not really your child, but just leave a slot for me the parent component to do my thing and render a component in here, right? Like don't you worry about it, right? It's not part of your tree. It's still the parents, child like it's your SIP but we pass it in like just give me a place where I can render something else, okay?

[00:03:52]
Like spelt calls these slots instead of children which probably like would make this entire conversation a lot easier. But like that's what happens when one framework is like eight years older than eight years older but several years older.
>> Web components and view and etc.
>> Use everything as well.

[00:04:12]
Not just the only other one that I use but you're saying that all the rest of them right, cool. And so we'll just part the season game for a moment. We'll put back in expensive component, which is still now. It looks a lot clearer in code, whose child application is, right?

[00:04:33]
It's, application's. It's not really game's. It's happening in between two different parts of game but like when reactors running through and it's running through application. When I see second opponent, right, that is worth, listening to say, yeah?
>> Definitely speaking is this valid to assume that whenever the component, no matter how many levels deep, it's specified as a child.

[00:04:57]
I still belongs to the very outer component which it was exactly declared.
>> Yeah.
>> Yeah, so even we had 15 layers doesn't matter.
>> Yeah, I think the heuristic is like it belongs to the file it's defined in.
>> Yeah.
>> Right, like, regardless of where it shows up in the DOM it is in the component tree, literally where it's written.

[00:05:20]
More than where it shows up in the DOM. So we'll have this in place, and we'll save it. Everything's great again, right? And we can see we don't have that slowdown again. And so that is a way to both we can either push state down or if we need something where it's got it, but it's got to be in the middle there.

[00:05:46]
We can pull the content up. There are variations on a theme and they both work equally as well. And like I said, I will use memo and I use memo all the time, like, but, like, my responsibility. Still show you that, you don't need those as the first thing that you reach for.

[00:06:05]
Sometimes just understanding in Reacts component, hierarchy will get where you're looking for before you pull out, the kind of bigger tools, right? I say this is the person who uses a power drill when I open up furniture, that says do not use with a power tool, right? I get it I am that person myself but like I have to play a role.