Pulling Content Up Solution

[00:00:00]
>> So I do like one of my favorite things about this workshop so far is that people are asking like some of the questions like before we get to it. And so we talked a little bit about react memo, and I want to, one of the questions that we saw that we talked about.

[00:00:15]
But we didn't like look at it in action, was like, okay, we're moving like expensive component and around and again on purpose, right? Because again, step one is can you just work with your component hierarchy in a way that does not involve extra taxes yeah one extra check is no big deal as they add up right like performance problems but sometimes that is the strategy it's like.

[00:00:38]
As due diligence, you should see can you do it? Can you can you solve your performance issue without, like, you know, it's not I wouldn't say it's like using like a like exclamation point important on a CSS tag. It's not that but like, the metaphor has its has its virtues.

[00:00:54]
But it is a thing that works and like we'll talk about in a second but let's see it first and then we'll talk about it so this I grabbed. In a previous one of the earlier bad ones right where expressive component is a sibling and is causing all the problems that it likes to cause that you're still living over in game two but it's not being used.

[00:01:17]
The joys of switching get branches repeatedly In a way that it was never meant to handle so let's go take a look at that I think it is yep it's up in 3001 We are slow, and there are like we said before, we are just doing this thing, parent re rendered.

[00:01:37]
Every child is asked to re render. They're most good ways of doing anything. There was a way to be like, hey, listen, I know what's going on here, stand back I got this right? And so react memo is basically like we said before when someone asks the question of like, it gives the ability to hug a component, right with some logic to like look at the props before they make it to that expensive component like we were moving stuff around.

[00:02:07]
So that new changes didn't make it to a component. This is a way to be, let me see that first. And there are different ways to do it for class based components versus function components and hooks should component update method on a, you can wrap a class component in reactive memo too.

[00:02:27]
So it's Should component update and there's another one functional components are unique to both of them react that memo and wrapping the component works on both but there's other ways to do it but they all predate react I would say at this point this is the preferred way to do it if I was dispensing advices on best practices my version of the best practice.

[00:02:46]
And what it does is it checks the props and then does not rerender it if the props are the same as last time, right? And particularly for expensive component, which does not take any props. They are always going to be the same because like empty is the same as empty every time Right, does null equals null?

[00:03:05]
It's one of the final truths in JavaScript where things don't always make sense. And using it is very easy. You put a space for that all to complete niceness. Memo, it's on the React Library and you wrap it. Memo does theoretically take a second argument so if we hover over and get the type information you can see right there props are equal is a function that takes the previous props and the next props and returns a Boolean or undefined.

[00:03:37]
You can take a lucky guess what it does right now just a shallow comparison, which it looks at the first property it doesn't if one of those properties is an object, it'll just say like is this object the same as the other object? It's not gonna recursively because deep equal is shockingly expensive.

[00:03:54]
And if you want to find a way to make your performance issues worse By trying to solve them. I worked on a team where they thought you had to do that to keep immutability in react and use a db equal on every single set state. That was the first time I got to use a lot of these tools, just repeatedly.

[00:04:15]
And so yeah, it wraps it and gives you your own ability to check to see Have I ever used that before? Yes. Was it four to five years ago? Of course. Do I remember what the issue was? Absolutely not,right? I think it was like I really only cared about like one prop?

[00:04:36]
or something like that,right? And the rest were irrelevant. And possibly could change but like only one thing mattered I don't really remember it was not my favorite day,right? It was one of these things I guess I'm doing this today kind of things. So you can pass the second one in recent memory I have not had a particularly good excuse to do it.

[00:04:54]
So now we're exporting as default so we can still call it expensive component everywhere but it's our hugged The expensive component, right? So it's not it's not the same expensive component as we had before. And unless it gets new and different props, which, if this is TypeScript, it definitely couldn't because the compiler would yell at me.

[00:05:11]
JavaScript. I'm sure I can manage it. But ideally, it shouldn't get it but at least it's not going to get on every render, and things will stop so it can it can sit where it was, and we should be good. Just go back. And see. Look at that.

[00:05:30]
You just wrap it, and yeah, there's a slight cost to that. But like in a lot of cases where any of these other techniques are available to you, it's a valid way to do it but it's not it should not be the fist thing you do. Because again it's not necessarily free and as to get the golden rule was not doing stuff is faster than doing stuff right and there's always technical answers right.

[00:05:54]
I always think about as somebody who leads the team to which is the second you start like You start that then everyone starts doing it. The next thing you're taking components don't even have subtrees and just everyone, well, that's what we do in this code base, right? And things get out of control and sometimes you need rules.

[00:06:12]
And so that's a thing. And so that's in place. So let's like okay for all those renders in the other app right that packing lists up and we get 3002. Yay. We had all the crazy we fixed it there. We still have it. Just for changing one will rerender everything All the time.

[00:06:37]
So, ideally, what I should be able to do, is just slather on some react out memos and all my problems should go away, right? Lets do it. Without big apps, it's not going to be that bad.
>> Alright, so application, the general structure of this app application has that new item has like a marker was red button.

[00:07:03]
The real two things are two lists, one for patch and one for unpacked items. Those then have a series of items. Right? Not a lot going on here. So what we'll say is listen item list if you get the same like, array of things like don't rerender memo.

[00:07:25]
I gotta import it Mean not important how many times I've done that and then given item on the list like if .Yeah especially like gives you imagine like the list of probably change right if one of them gets his name change like that's gonna remap an array Arrays get changed all the time.

[00:07:46]
And I'm gonna just say that one more time cuz when we talk about some of these other memorization things, like if you ever memorize something where you're using a map and returning a new array right before that, then guess two arrays with the same things are not the same array.

[00:07:59]
And this is why like using the tools and looking after you do something like a lot of times like 95% of time the thing that you think would happen happened notice I said 95 just memo everything let's go for it like this is I think in a lot of cases like Guess what?

[00:08:19]
A younger not as handsome but more naive version of me. Like I've seen pictures of myself a few years ago. And like, would have done right which is this I'm gonna do this everywhere. All right, and would find out later, there was one time that I was definitely contributing factor in the problem, right, cuz it's like yo, I this is what I'm supposed to do.

[00:08:44]
It was before I had come across my own now adage of then if that's true, then they would have just done it in the framework, right? This isn't just a fun like a little chore they let me do to make me feel like I was important. So I think I got it mostly everybody to get an header I can see cuz it's not a modified file.

[00:09:02]
It was we're just making a point at this point. So like, yeah memo. Toss it everywhere. Great. And so now like things shouldn't change, right? I should be able to like I don't know like, edit the name of one of these or shouldn't affect this array. Nothing, nothing is better.

[00:09:33]
Everything is still as bad as it ever was, right? In fact, I could literally do something silly to make the to make a ridiculous point Let's do it in the actual thing let's say nothing important And we'll say, yo, after you load. Wait, like, a second and let's just flip it to true.  Let's just change literally anything, right?

[00:10:24]
Does that, so you don't go like, well actually, maybe cuz you changed the name of one that generated Wait a second. I'll act like I know how you state works for a second,I was gonna say well I've never seen that implementation,this is why,I put this this is like one of the like problems that I have now I like which is like sometimes I will have a mistake and a PR.

[00:10:55]
And someone will be like, When I thought you did that on purpose, I'm like, No, I'm just an idiot. Right? Like, I just, I was just tired. It was just the end of the day and I thought it was responsible to push up my code before I made dinner.

[00:11:11]
All right. Cool. So let's go ahead. And you can see that in that second, the entire app, nothing to do with the items re rendered everything right so just me following that blind advice and going for it didn't I mean maybe something didn't remember that before, but like, generally speaking Yeah, it looks like packing lists was fine.

[00:11:38]
Like the number of items. That one was fine. And I'm pretty sure that was everything else we rendered. I mean, I literally have tools I could say go hit that one over, refresh and do it. Cool everything re-rendered. Why? Why did everything well I can find out why, that's good.

[00:12:03]
That was the first time we went the second time. A second later. Look, the tool is telling me props changed. It said like Ram was doing his job is like, I will not let this component re render unless the props change. I told her story about how I wrote a custom one I don't remember why.

[00:12:28]
I don't remember if I was doing something really dark that I shouldn't have now I have this like sudden existential sense of dread. I was like putting over all the functions, right? Which in class based components might have been okay. But closures are a thing and hooks and like you would have the wrong variable in there.

[00:12:44]
Don't do that. I don't know. That's what I did. But like now I'm worried that like, whatever thing I did. Four or five years ago was potentially terrible it's pretty hoax. I couldn't have been that bad. And might not have been that but yeah, we can see update and remove other reasons that everything is changing.

[00:13:00]
And again. Like here's the thing. JavaScript exists. Sometimes we forget that, but it's still a thing. And like, it's not even bad. It's just like there are rules. Right? And if we look at this, like we have the eternal problem and I kind of did the thing where it's like you have to like mention whatever the murder weapon was in chapter one if it ends up biting you later Which is like we have all these helpful things of like Cool yeah make an item with the right properties great here's the one that like maps to the array of it has the right ID and updates and all this stuff they have to do with immutable data structures that now we just you know live with.

[00:13:45]
And yeah this one filters off does have the right ID but it didn't have the ability to set the items because I don't have that until I'm in this function right so what did I do it could just wire them up life went on. However like almost like what we saw on the very first time right this despite the fact that it does the same thing as the last time this Ran is a new function in memory right and in JavaScript like the like when I say there are rules.

[00:14:18]
It's like one equals one totally depending on how many equal signs you use two are true can also equal one but generally speaking if we stick to using three equal signs one will equal one a string or EagleEye same string like. Primitives are passed by value. Objects are passed by the reference in memory, right?

[00:14:39]
So, two arrays with the same items are different objects in memory thereby they're not equal. Same is true for two functions that do the same thing. They are different they are different memory addresses and thereby are not equal. So when react a memo looks at this function that is in our eyes.

[00:14:57]
See the same thing and the one I got last time right it's like well these are different because it's a computer. This is why I'm not worried about like robots taking over just yet like [LAUGH] let's deal with this things like this automatically. And then I'll then I'll worry I'm Famous last words.