DEV Community

You MUST use the useCallback hook!

Itay Schechner on September 30, 2021

Hi everyone! My name is Itay and I’m a fullstack developer who specializes in back-of-the-frontend React.js code. In this shot, I’ll show you the ...

Read full post

Keff • Sep 30 '21

How is the last example more optimized and why? In what ways is it different than not using useCallback? What benefits would this give me?

Much information missing for such a big title.

Itay Schechner • Sep 30 '21

I mentioned it in the article. The last example is more optimized because we don't recreate the click handle function on every rerender.

Keff • Oct 1 '21

I still don't understand, isn't this just re-creating the callback on each re-render as well?

const handleClick = useCallback(() => {
        setNumber(x => x%2 +1);
}, []);

How is this more efficient? I mean, you are still "re-creating" the callback on each render.

Correct me if I'm wrong, but as I understand, the only thing that useCallback does is memoize the function for the passed dependencies, so it seems in this particular case it is not optimizing anything as it does not know the about any dependency.

Itay Schechner • Oct 1 '21

Just read the hook documentation. I'm sure you have better things to do other than commenting discouraging comments on random posts.

Keff • Oct 1 '21

It was not my intention to discourage, sorry if it felt that way. But for having such a strong title, I felt the post was lacking information, that's all. No need to get angry or discouraged by this, I was hoping for a bit of a conversation about this.

Just read the hook documentation
I've checked the docs, and found not much information about why this particular example is more optimized, that's why I asked! Also, by the title I supposed this post would explain that in detail...

Again, I'm sorry if I sounded harsh or discouring. That's not my intention at all, but I hate these kinds of titles, even more if they don't offer that much value.

Itay Schechner • Oct 1 '21

I understand. There is a great explanation on why you should use it in a previous post I wrote, using websockets with React.js. I explained in detail how use Callback saved my life there.

Keff • Oct 1 '21

I will check it out! Cheers!

Egi Ginting • Oct 3 '21 • Edited

@nombrekeff

Check Kent C. Dodds article if you still not get it, (I'll just copy some part of it here below)

Q: So when should I useMemo and useCallback?
A: There are specific reasons both of these hooks are built-into React:

Referential equality
Computationally expensive calculations

And thanks for the article @itays123 , hope it can cover more complex cases and explanation in the future so some readers won't get the wrong idea of this hook, because premature code optimization can lead them to make thing worse

Keff • Oct 3 '21

Fantastic I'll check that out too, thanks for the info

Keff • Oct 3 '21

because premature code optimization can lead them to make thing worse

Yup, totally agree here, that was in part why I wanted to understand it better

Itay Schechner • Oct 3 '21

Already Archived and prepating a better one

hassanKhademi • Sep 30 '21

Great