Intermediate React, v2 useCallback
This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "useCallback" Lesson
>> Brian Holt: So I was showing you, you use callback. This works relatively the same way. It's slightly different in that, we're using it together with something called memo, right here, which is different than use memo, by the way. That's confusing that they call them the similar thing, but just separate the ideas.
[00:00:15] If you've ever seen pure component, which is a react construct for performance for classes. Memo is that for functions, and I'll explain that here momentarily.
>> Brian Holt: So here, I have the callback component, and I have this clock here that's updating every single second. And then I have a time an account.
[00:00:38] These are two different pieces of state. And then I have an effect here that moves this clock up. And just like I was explaining before, the way the react works is that a rerun orders every all of its children every single time. Cuz that assumes that path is quite fast.
[00:00:54] However, if you have a big Fibonacci, that's no longer true. So if I get up here.
>> Brian Holt: So it's up to 38. Notice that this is still advancing, 1:22:18, but notice this last rerender is not changing. So the last time that rerendered. Was that, that time, and so it's not re-rendering this every single time.
[00:01:21] Otherwise, this would die, because it would be trying to calculate the Fibonacci of 40 every single time. Does that make sense of what it's solving here? So let's talk about how it actually works. So down here, I have the expensive computation component which actually does, this part of the component right there.
[00:01:42] And it has a function called compute, and it has a function called count. So these are the two props that are being passed into expensive computation component. Expensive computation component, is a memo wised component which is what this memo means right there.
>> Brian Holt: What memo means is, as long as none of my properties have changed, don't re-render me.
[00:02:06] So as long as compute and count are the same, compute and count. Please do not re-render me. So that's why this is able to keep going. And it's still working, and it's saying, leave this one alone. And we call compute and count right there, otherwise this would be computing every single time, and it would be a disaster.
[00:02:28] And the way we do that, is we use this memo in conjunction with this thing here called useCallback. useCallback works almost the same as useMemo. But what it's doing here is you give it a function, and you give it dependencies of how often you want that function to update which in this case, it's always the same function, right?
[00:02:49] So this Fibonacci is always going to be the same, and the count is, it only updates when count changes. Now, we could have done this differently, we could have structured this so this wasn't a problem. But notice here that Fibonacci is the variable inside of callback component. So if I change this to be just Fibonacci directly, notice that this right here, it's rerendering every single time.
[00:03:17] So if this starts to become a big number,
>> Brian Holt: This is gonna get really painful really fast.
>> Brian Holt: [LAUGH] Now, it's making my browser actually kind of hard to use. [LAUGH]
>> Brian Holt: You can see that I can't even scroll very well anymore. Okay, stop it. Okay, I'd rather have an error.
>> Brian Holt: [LAUGH] All right, there we go. I might have to refresh my browser after that one. That's because what you're redefining Fibonacci every single time, so that function technically is changing every single time. It's a new Fibonacci function. So that's what use callback does. It's like, hey, this isn't changing, give me back the same function every single time.
>> Brian Holt: Make sense? Okay.
>> Brian Holt: Again, only use memo and use memo and use callback when you actually already have a problem. Do not preemptively use them. I've seen teams use pre-component and memo everywhere. It's a mess. Believe me, that react, 99 times out of 100, 999 times out of 1000, is fast enough as is.
[00:04:45] And it makes your code less prone to bugs if you don't use those things when you don't need them.