Optimizing Performance with Memoization

[00:00:00]
>> Brian Holt: So, let's turn it back up to a hundred here so we can see some jenk. And let's go fix this. Let's make this like, not do that. There's a couple of levels to this. First thing is we're gonna import memo at the top from react. And then when you have this function here, we're just gonna wrap the whole thing here in memo.

[00:00:32]
So I map this function is now passed into memo as a parameter. This tells React is like, if my props didn't change, do not re-render me.
>> Brian Holt: Right, does that make sense? As soon as my props change, by all means, re-render me, but leave me alone unless my props change.

[00:00:57]
Just cache this between various different results. We have render. That's a function in theory not changing, right, and you have options, which is an object full of theme and text. So theoretically, none of these are changing between each re-renders of the clock, right? So if we go look at this, why is this still changing?

[00:01:23]
Look at this code right here. I have object A, and I have object B. Is object A AA equal to object B? This is like dumb interview questions, I hate them. But actually, in this case, it's important. No, right? Let me just open this. If you want me to prove my point.

[00:01:45]
x equals blah, y equals blah. Both empty objects, is this true? No, cuz they're actually different objects, right? They point to two different things in memory. Despite the fact that they're functionally equivalent, they're not literally the same object, and that's what this question is, right? So if we look at our code here, obviously I did this intentionally.

[00:02:09]
In between renders this object is getting created a new every single time. So is the old version of this object equal to the new version of this object? No, right? So that's what's happening here with options. So let's go ahead and fix that one first. We're gonna use something called useMemo.

[00:02:27]
And then all we're gonna do here is just say useMemo, right? useMemo, and then just like the effects here, we have to give it like, hey, this has changed when this has happened. You just give it an array of, hey, this actually does change when either text or theme is different, that's when it'll know to invalidate its cache of this, right?

[00:02:48]
>> Speaker 2: Which cache is that the cache in the browser is it?
>> Brian Holt: The memo cache, right? It's like a React memo cache. It caches the same object between renders, right? So that options will be triple equal to itself, because it's gonna give it back, literally the same options object.

[00:03:03]
So, yeah this will cache the same options object between renders, and it'll only invalidate that when one of these two things changes. That the previous version of this is not equal to the next version of it.
>> Speaker 2: I didn't know there was a React cache, though.
>> Brian Holt: I don't even know if it's called that, that's just what it is.

[00:03:19]
It's effectively doing. Now, probably to no one's surprise, that's broken. Yeah. This is a function, sorry, not a direct object. So you need to make this a function that returns an object, text and theme cuz that's how it worked. That fix it? Yeah, that fixed it. Sorry, had the API there.

[00:03:48]
This is a function, it returns an object with text and theme in it. So, still rerendering, why? FunctionA equals function blah, functionB equals function blah, are these two things equivalent? No, for the exact same reasons they're not. So, there's also something called usecallback that deals specifically with functions.

[00:04:13]
Usecallback and kinda the same thing here. Usecallback.
>> Brian Holt: And when will this not be valid? Never, it's actually always the same function, so you just give it an empty array saying this is always gonna be the same render function, this will never change. And now, if I go over here, this has stopped rendering because of memo, right?

[00:04:51]
Now, you can see this is now updated only when this these things have changed. This is still janky this. I mean, it is right cuz it still has that expensive render in it, but this is not gonna cause other parts of our code base to be janky. Yeah, you're kind of like containing the the blast zone for janky pieces of your code, because we all got them.

[00:05:14]
We all got janky pieces of code, this was always kinda funny. I had a claw generate me this random piece of markdown and some of it was pretty funny. My mental health plus Javascript equals undefined. Why should JavaScript developers wear glasses? Because they don't see sharp. [LAUGH] Thanks, dad.

[00:05:34]
Try to watch friend masters, feel confident, attempt to use new knowledge, panic. [LAUGH] Is that the life cycle of your customer? That sounds about right. Maybe I should become a farmer instead, I do feel that.