Intermediate React, v3 useMemo

Transcript from the "useMemo" Lesson

[00:00:00]
>> Let's talk about memo or useMemo rather. So, we're gonna go to memo.js here, and we're going to, Do the useMemo as example here. Okay? So, there's kind of two things going on here, in this useMemo for example, if you click on the use memo header, it'll go from red to green, kind of like you state.

[00:00:27] And then we have the, Fibonacci sequence. Now, I know that's a math thing, you don't have to care about it, but just suffice to say that computing the Fibonacci sequence recursively is computationally expensive, which is just to say like, it's expensive to try and compute the Fibonacci sequence.

[00:00:47] So, if I keep clicking this, once it gets to about, I don't know, 30 it starts getting like really slow. I've noticed that this is getting pretty slow, each time I click it's taking longer, and longer, and longer. And it's like exponentially gonna grow of how long it takes to compute Fibonacci of 40, right?

[00:01:10] So again, you don't have to care about necessarily how it works, but just know that it's expensive, and we don't want to re-render it every single time, right. So, if I come down here to this memo here, right? This fib here is very expensive for us to compute and if I recompute it every single time, it's going to make this very, very slow.

[00:01:36] So, I wanna make it so that this in fact, let's just see what it looks like if I don't do it this way. We're gonna copy, we're gonna make that, that way. I'm just gonna make this Fibonacci. So, this is gonna get computed every single time. So, if I put it like this, and let's just put this immediately like it's 35.

[00:02:09] So, if I get this up to like 40, right? Well, this is really slow. Now if I start clicking on this use memo, notice it takes a really long time for that to change colors. So, I click now, wait, and it changes, right? That sucks, right? Just changing a color should not take that long to do So that's where use memo comes into play here.

[00:02:31] I can basically say like, hey, if this number hasn't changed, do not recompute it, it's very expensive, I would not like you to do that. So, if I change this back to this, we'll just put this at 40. It's gonna take a while to re-render the page, cuz obviously that's very expensive.

[00:02:54] Now I can just click back and forth on this, and it's no problem whatsoever because it's saying, hey, if num doesn't change, don't touch this, right? Just give me back the same number that I gave it last time. And then as soon as num changes, as soon as I click plus here again, then it's gonna go back and re compute it again.

[00:03:13] So, this is a performance optimization. Again, only use this when you actually already have a problem, don't preemptively use this, right? So, wait until you have a Fibonacci of 41 problem before you go in and throw in a used memo,because this just makes this code less easy to read, right?

[00:03:29] If you look at line 14 versus line 15 here, which of these is easier to understand? There you go, 14 or 15. Obviously 14, it's just more succinct, right? It obviously just like it's the Fibonacci number. Here, I have to look like, okay, we're memorizing it, you have to pass in a function, you have to give it like some sort of values to watch, blah, blah, blah.

[00:03:54] But when you're calculating Fibonacci of 40, you should definitely do something like this. So, let's talk about that for just a second. What exactly is going on here? What useMemo does is basically you give it a function and you're gonna say, only run this function, this one here, whenever this changes.

[00:04:18] So, whenever num changes, then you can go ahead and run useMemo. But if this was 40 last time, and it's 40 now the last answer was accurate. Just go ahead and leave it at that. And again, you really only use this for performance. That's the only reason you would use it.

[00:04:40]
>> Brian, I don't understand what the color change has to do with the changing of the Fibonacci number.
>> Sure. So, the question is like what is the number the color change has to do with the Fibonacci? So, every time that I click on useMemo, when it changes color from red to green, the state changes, right?

[00:05:02] So, whenever the state changes, it's going to go back, and it's going to run this entire function over again. And if I'm calculating the Fibonacci sequence every single time, it's going to recalculate the Fibonacci every single time.
>> I have a question as well. So, for the useMemo, it seems like it's very similar to the use effect.

[00:05:22] So, can you put something in the same way with the use effect where it looks for like if the number changes, then it runs it again, because it's re rendering or is that use effect that if it hits that number if that number changes, it re renders the component that way versus useMemo?

[00:05:37] Where it just reruns a function, am I getting it right?
>> Yeah. All right, so let me frame the question in a slightly different way. Let me see if I answer your question in the process. And if they don't, then we'll chat a second. So, the question is, could I do this same thing with use effect basically?

[00:05:57] The answer is, you could like basically move this into an asynchronous computation of this. And then use effect to hook into that and basically say, all right, I'm going to render this component once, and then I'm going to schedule an effect to run to go calculate the Fibonacci of 40.

[00:06:16] And then when that comes back, I'm going to re render that. And then I'm going to have a ray there to say like okay, only change, only scheduled as to rerun again, that's actually probably even better than what's going on here because this gets hung up every single time that I click plus here, right?

[00:06:33] And if I did that with an effect that you actually wouldn't hang the UI there. So, you could do it that way, if you were, okay, going into like an asynchronous pattern for this, that is not always going to be possible. I do not think.
>> Can you use the useMemo for like if you have an API call in here in the same function in the same component, but you also have like something that changes colors that affects the state.

[00:06:58] So, three renders it but hipness you do not necessarily want to recall the API. It is a good question. So, if you have an API. Could you use useMemo to basically not call the API every single time that something renders in that particular case you should use an effect, use effect is specifically catered for that use case.

[00:07:18] I'm not gonna say you couldn't figure out how to make this work with useMemo but it would be really strange, not something you can use a lot. In fact, in my years of writing react I don't think I've actually professionally needed to use memo. I just did like, I learned about it to teach this class basically and haven't really used much sense