This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "useMemo" Lesson
[00:00:00]
>> Brian Holt: Let's go on to useMemo. So the next two are performance optimizations, okay.
>> Brian Holt: So let's take a look at how this works first of all. Notice here I have a clock. And this clock again works exactly like the other one up here, that it advances every second.
[00:00:23] This component has to re-render every single second. The way that React works, that if I re-render a parent component, just by default, I'm gonna re-render all the children as well. It's kind of a performance optimization that they don't have to go check everything, they just say, well if this changed, probably everything underneath it changed.
[00:00:41] And they don't do all the extra checking, right, because it probably did all change. And these render methods, in general, are very fast, right? So in general, that's a good thing for it to do. Cuz React is really good at re-rendering things. As long as you write performant render methods, it's really fast, okay?
[00:01:01] The problem comes into is that I wrote an intentionally slow function. You don't really have to care about what Fibonacci does, but computing Fibonacci numbers recursively is very heavy, right? So what I want to say here is this computation right here fib, so fibonacci of number is a very heavy operation.
[00:01:27] So just to prove my point to you, if I start clicking this, the first ones are not too bad. But as soon as this gets to about 30, it's going to start being really slow.
>> Brian Holt: Right, really slow.
>> Brian Holt: Okay, so what's the problem here? Well if I have this, and this is re-rendering every single time, that would mean that it would be computing this every single time, right?
[00:02:06] I'm probably gonna crash my browser, but it'll be fun. Let's do this. So if I say, const fib = fibonacci(num), that means this is going to get computed every single time, right. Now right now, fibonacci of one, it's pretty fast. Wait, I've shown you, useCallback. The point is still the same because it still uses Fibonacci numbers.
[00:02:42]
>> Brian Holt: So right now,
>> Brian Holt: So ignore this. We'll come back to useCallback in just a second.
>> Brian Holt: But they both use Fibonacci numbers, so it's the same point. So notice, this is really slow right now.
>> Brian Holt: Right, right now it's not re-rendering, so everything's okay, right? So it computed it and everything was fine.
[00:03:10] But if I click on this useMemo to change this from green to red, it's going to recalculate this. So if I click on this, I click on it, look how long it took that to change to red, right? Because it's recalculating the Fibonacci sequence here, right? Wouldn't it be great if we didn't have to recalculate that every single time?
[00:03:33] So if I change this to be useMemo here,
>> Brian Holt: Where I give it a function of how to recalculate this and then its dependency, just like you use effect. Let's get this up back to another big number here.
>> Brian Holt: Probably should have just started with 40 or something like that, right?
[00:03:58] Okay, so this is now really big again, right? But notice, I can now change this back and forth, no problem, because it's not recalculating every single time. How often will you use this?. Honestly, maybe never, right? This is not a very typical problem, however, with hooks it can arise, right, where you're computing things every single time.
[00:04:19] So that's what useMemo does. You give it a function of how to compute something and then you give it its dependencies and it will only re-compute it when its dependencies have changed.