useMemo

[00:00:00]
>> The next thing we're gonna talk about is two performance optimizations for React. One of them is called useMemo and one of them is called useCallback. They're extremely similar. Infact, useCallback is just basically a permutation of useMemo. You can actually implement useCallback using useMemo, fun fact, but we're not gonna do that today.

[00:00:25]
So you can see here I have this little animation of this red ball going back and forth. And let's actually just go directly to Stack, let's look at it on there. Okay, So the way that this is working is it's just doing Math.sin, right, which is like a wave that goes back and forth.

[00:00:51]
And then it's requesting AnimationFrame, and it's animating to set the left +1, and then it's using sin to go back and forth, right? So this is updating several times a second, and it's moving itself 0.05 every single time that it does that, okay? We also have this very expensiveMathOperation here.

[00:01:16]
And you can just take me at my word that expensiveMathOperation is expensive. But just so you know, it's just the Fibonacci sequence. If you don't know what the Fibonacci sequence is, don't worry about it, but just know that at the end of the day, this is what, 1.5 million.

[00:01:31]
This is the number one added to itself 1.5 million times, which is dumb and expensive. But you can imagine this would be like calculating some formula or something like that where it would be some sort of expensive computation, that's what we're meant to try to simulate here. So going back to our useMemo code, if I don't do this useMemo here and I just directly calculate this every single time, that's gonna cause this our little animation here to be very janky, right?

[00:02:05]
And we don't want that, we want that to have a nice smooth animation back and forth. So just to prove my point here, let's copy this. And we're just gonna say, expensive computation. And now if I save this, look at how janky our animation gets, right? It gets really slow.

[00:02:32]
Because now every single time that ball moves, it's added one to itself 1.5 million times, which is wild, right? And this just gets worse as we increase the count here, right? It's just slowing to a crawl. So if we go back to this, I think I probably made my browser a bit slow now as well.

[00:03:01]
So let's just refresh the page totally, Part of it is that I haven't cleaned up my animation frames as well. But you can see now with using this useMemo, it's nice and crisp. And if I hit plus here, notice it'll stop for a second while it recalculates. But once it's done, then it goes back to being nice and quick again.

[00:03:29]
So that's what useMemo does, you give it a function here to how to recalculate something and then you tell it when to recalculate. This is the exact same kind of array that you give to effects, is like, hey, only recalculate when count is different. I mean, the only way that we make count different is by clicking on the plus button here.

[00:03:49]
Does that make sense? So in particular when you're performance sensitive, right, when I start seeing jank here, that's when I know, okay, this is a good opportunity to useMemo to prevent that kinda jank from happening inside of my React components