useCallback

[00:00:00]
>> So let's useMemo, we're gonna get to useCallback and it's gonna look really similar because they're very similar. Okay, so I have this useRef component, right, this is actually literally the exact same component that we looked at it in the useRef example. I don't want this to rerender ever basically, right?

[00:00:25]
But you can imagine, let's say I have some callback that I'm providing into this. So you can imagine this would be something to update the parent, it could be a hook function. It could be some sort of function that I need to render this home component correctly or something like that.

[00:00:43]
I don't know, some sort of callback that I have to give into the useRef here, right? So I'm getting back to this prop here called CB into my useRef component. If this is not literally the exact same callback every single time, it's gonna say, hey, something changed, right?

[00:01:04]
To prove my point here, I have my useful callback here, if I just copy and paste this here, And I save and I rerender, Three just gives up. It's you're trying to rerender me way too much, I don't know what to do about this, I'm done, right, that's a problem.

[00:01:27]
So that's why we have this thing called memoized useCallback. You can memoize a callback and then parse that into the function. And if you remember from that previous section, this is wrapped in memo, also important. The component you're passing into has to have memo wrapping it as well.

[00:01:46]
But using useCallback and memo together, you'll get this ability to not rerender the component every single time. Going back to useCallback. So that's the point of useCallback is to memoize some callback so that you're giving the exact same function in every single time. So that memo can cause this component to not rerender despite the fact that this is rerendering every single time that ball moves back and forth, right?

[00:02:20]
If you're looking at it and saying, that's pretty specific, it's cuz it's pretty specific, right? It's a very specific performance optimization, but in a case like this would be essential, you wouldn't be able to accomplish this any other way. Now I'm pretty sure, let's see if I can code this from memory.

[00:02:47]
If you're looking at this, this feels like just a very strange way to rewrite, useMemo, it's cuz it really is. const memoizedCallback =, and I think it's just a function that provides back a useful callback. = useMemo. Yeah, so line 15 and line 14 here are actually precisely equivalent, they do exactly the same thing.

[00:03:35]
So it's just a specific use case of useMemo. I think this is actually literally how it's implemented inside of the hook itself, so, But it's there, I've heard people on the React team say that they wish they hadn't shipped useCallback because it's not necessary you can just do it with useMemo.

[00:03:54]
But here we are, that's what it is. Does it makes sense? Or if it makes less sense, then you could ignore it because there is useCallback, so you can useCallback there. So those two are performance optimizations, please only use them when you actually have a performance problem like this.

[00:04:10]
This is a performance problem that I've arbitrarily created for you. But if you have that, then by all means use these. But otherwise, just file them in the back of your brain as I'll use this when I find jink in my UI.