useCallback vs useMemo

[00:00:00]
>> Brian Holt: One thing you might wonder is how are these different? They look really similar, don't they? They are intact, I have heard one of the React Core developers say that they regret making useCallback, and they wish they would have just done everything with useMemo. The reason why they, so let's make two versions of this.

[00:00:25]
>> Brian Holt: If I made this useMemo, it would just look like this.
>> Brian Holt: These two lines, line 20 and line 21, are the same thing.
>> Brian Holt: Thought that this looked weird cuz objectively it does It's a function that returns a function. Literally, if you look in the code base, use callback is implemented as this.

[00:00:50]
>> Brian Holt: And I think this just makes this easier to read, so that's why it is there. I guess I do have a little section here that just, let's me rant for a little bit, so we should do that cuz I like that part. So we fixed it, we did it useMemo versus you called back this is exactly what I just showed you there, so useMemo is just or use callback is implemented using useMemo.

[00:01:18]
What about strings and numbers? So dont need to use memo on those because, I'll just bring this up again, x is triple equaled to x, right? Those are measured by value, not by pointer, for anyone that, I don't know, spent too much time in a CS class, so you don't useMemo on those.

[00:01:39]
Those you can just pass in for numbers, and for maybe not floats, you might have some issues with floats, who knows? I guess that's kinda the point, but strings, you'll have no problem with that It's just objects and functions. Use these tools sparingly don't go hog wild with them, because what's problematic with this is now that we have memo on here, sometimes we might expect it to re render, and it doesn't.

[00:02:07]
And you're like, why is this not re rendering right? And you get these weird bugs where you start putting state and moving it around, and you don't realize that one of the components that at the upper level was memo, and therefore it's not rendering anything on bug. Beneath it again, stuff like that, right?

[00:02:23]
You end up with this weird class of bugs that you wouldn't otherwise have that's why I'm saying use these really sparingly because generally reactors fast enough.
>> Learners: What if you had complex JSON structure that your system was polling for and you're passing it down to render a tree of components, and most of the time nothing changes.

[00:02:45]
Sometimes something does, and you want things to react. Could you use memo and use, a key of the stringified JSON? When the string KSON changes, then the block of JSON just passed down?
>> Brian Holt: The only concern I would have about that is, in theory, something that you JSON.stringify should always render out the same way.

[00:03:12]
I don't think it's actually required behavior of the spec. But I think functionally most browsers observe it would be a concern, right? That something might not happen that way, that it's not deterministic. Functionally, that idea kinda works for me, but I would just try and be precise with where I would use the memo.

[00:03:35]
Rather than just saying, I'm just gonna memorize this whole damn tree, I would say, I'm worried about these components therefore I will memorize just these ones that would be my disposition. And actually, React Compiler is really gonna save you here so this is what I was just about to talk about.

[00:03:53]
I have an intro lesson on React Compiler, so if you haven't taken intro, just go check out even just this part of it. React Compiler actually does is it goes and find it, runs your code, and so, I don't think this can ever change, therefore I will memorize it for you.

[00:04:08]
I guess yours will would change, right? So maybe this compiler won't save you here, but it'll save a bunch of us here that like what all React compiler does is it goes through as it sees a bunch of functions that can't or a bunch of components that will never change.

[00:04:23]
And then it'll memoize them It'll basically memoize them for you. I love that when tools can do this for you because then if I update my code where it could change, React Compiler will no longer do that for me, which is cool.
>> Learners: Do you put that in a Git hook or a pipeline, or where would you run the React Compiler?

[00:04:40]
>> Brian Holt: It's a Babel plugin.
>> Learners: Okay, I got you [INAUDIBLE].
>> Brian Holt: Yeah, so it's at build time. But yeah, for yours, I would just be precise about which things. Again, rerendering for the sake of rerendering is generally not a problem, so i will just attack that will actually become a problem.

[00:05:03]
[INAUDIBLE] actually dodge that question that you're asking.
>> Learners: It's a good point, they are branches in that that could be memorized separately from the entire structure.
>> Brian Holt: Yeah, I mean the whole thing never changes, yet the parent component changes a lot. Cuz that would be the only time that you'd run into an issue here, right?

[00:05:21]
That you have a clock component at the parent level, cuz if the parent never re-renders, then it doesn't matter, right? Cuz it's never gonna re-render anyway, right? So it only matters when the parent re-renders a lot too, yeah. Cool, don't just use memo all the time have I said this enough?

[00:05:40]
Should I say it again? Don't just use memo all the time, please okay, that's I have written it in there like four times. Can you tell that this has been a problem for me? And then give React Compiler a shot It is unstable, and I've actually heard of some people actually now having problems with it.

[00:05:59]
Since last time I taught this course, so be judicious with it, but that's what it will run memo for you on places that it observes that it can't rerender, okay yeah, question.
>> Learners: Have you used React Scan?
>> Brian Holt: React Scan that's not even a familiar term to me so, no, I have not used it.

[00:06:22]
>> Learners: It's a plug in or whatever to debug React performance issues.
>> Brian Holt: Okay, yeah, I mean, do I have it on here installed at the moment?
>> Brian Holt: Yeah, so the profiler will do some of this thing as well can I just use it on here?
>> Brian Holt: Profiler, and then I click record, and I refresh the page.

[00:06:52]
>> Brian Holt: Maybe,
>> Brian Holt: And stop, okay so this has a flame route and a bunch of other stuff, and I can't remember off the top my head, there's a way to do this and so you it does it on boot up as well.
>> Brian Holt: Theme, Auto, Compact, anyway yeah, you can highlight stuff that rerenders.

[00:07:16]
Pretty cool stuff, so definitely worth checking out this is There's some built in stuff to the official React tools that'll help you with those kind of things. And you can see here it does tell you that it's memoized as well, which I thought was pretty cool so you can identify hopefully at a glance things that are broken.

[00:07:39]
It'll also have little magic sparks if it was done by React Compilers, that it was done automatically for you. This will solve almost all of your React performance problems, if React has gotten slow for you in some place, and then these don't solve it for you, probably just have to get out of using a framework.

[00:08:00]
Cuz you're in something too so sensitive that any sort of overhead will cause problems good example that would be like 3D graphics or something like that, right? Or WebAssembly, you'll start leaning on things like that.
>> Brian Holt: Which is to say that never problems that I faced