DEV Community

Demystifying React Hooks: useCallback and useMemo

Milu on June 14, 2020

React Hooks introduced the capability to use state and other lifecycle features while using functional components instead of classes. Hooks are a s...

Read full post

Joseph Mawa • Jul 13 '20

Thanks for the article. The illustrations make it easy to follow.

useCallback hook returns the same instance of the function being passed instead of creating a new one when a component re-renders. This occurs only when the dependencies passed to the second parameter change.

I think the above statement is a little confusing. What occurs when the deps change? Is it:

Returning the same instance of the callback?
Creating a new instance of the callback?

Milu • Jul 13 '20 • Edited

Hi Joseph! Thanks for your question... I can see how this statement is confusing.

Let’s take a look at useCallback’s structure. It receives two parameters:

(#1) a function
(#2) an array of dependencies

useCallback returns the same instance of the function being passed (parameter #1) instead of creating a new one every time a component re-renders.

It creates a new instance of the function being passed (parameter #1) only when the array of dependencies (parameter #2) changes.

Does this make sense? I will update my post to make sure this definition is more clear. Thanks for your feedback :)

Joseph Mawa • Jul 13 '20

Thanks for the feedback. I think it will be clearer when you update it.

Ramil Muratov • Jun 19 '20

Great article.

Adding performance optimizations using useCallback and useMemo is expensive

Wouldn't you mind to tell where can I read more about it? I saw some notes in official docs about using these only as performance optimization, but have never read any post or explanation from someone from core team or seen some benchmarks. Thanks!

Milu • Jun 20 '20

Hi Ramil, thank you for reading! Let's break down some reasons why useCallback and useMemo are expensive:

Regular function: const testFunc = () => { ... do something }

useCallback: const testCallbackFunc = useCallback(() => { ... do something }, [dependencies]);

In the callback example, you are creating your regular function + calling a callback + passing an array of dependencies. It is already a bit more complex when looking at them side by side, but also the useCallback hook is setting properties and running through its own logic under the hood. So, if you are trying to optimize something super simple like the regular function I have in my example, useCallback and useMemo are just not worth it. We are creating complex code for ourselves and requesting our component to run other complex logic under the hood to optimize something very minimal.

Here is a fantastic article by Kent C Dodds that explains this in more detail.

I hope this explanation was helpful :)

Vuelancer • Jun 15 '20

Nice stuff!
Where did you made those thumbnails and pictures?
If any website, do share!

Milu • Jun 15 '20

Thank you! I drew the illustrations using an app called Paper Pro :)

Vuelancer • Jun 15 '20

Thank you! I like those illustrations!
I will use it on my youtube videos!
😅😅😅

Milu • Jun 15 '20

The app is super easy to use and it has a free version as well. Definitely very useful to draw quickly!

Vuelancer • Jun 15 '20

Generally, I use to make some sketch like designs by excalidraw application...
Now, I find some new tech.

Vipin Saini • Jun 24 '20 • Edited

Thanks Milu for another informative post.
Keep the good work continue.

But, one Question please -
What are the alternatives of these 2 functions please? because you have said in your post these both functions add performance optimizations and expensive.

Milu • Jun 24 '20

Glad you found this post helpful and thanks for reading! :)

Nuno Pereira • Jun 16 '20

Thx for sharing !

Milu • Jun 16 '20

No problem Nuno! I will be exploring a few other React hooks in the next couple weeks :)

Bennett Dungan • Jun 15 '20

Love the little illustrations!

Milu • Jun 15 '20

Thanks Bennett!

Patricio Sanchez Alvial • Jun 15 '20

Thanks!!

Milu • Jun 15 '20

No problem Patricio :) thanks for reading!

ponyjackal • Jun 16 '20

Thanks. Milu
What would be the next post about?
I look forward to your next one
Thanks again

Milu • Jun 16 '20

Hi there! I'm thinking to explore useRef next but I'm open for suggestions. Thank you for reading! :)

mogwai • Jun 15 '20

Damn. I wish I'd read this before my most recent interview lol. Thank you, Milu!

Milu • Jun 16 '20

oh no! Now you are ready to conquer the next one though. Thanks for reading :)

Enrico • Jun 16 '20

Great article! I often see examples, where the submit function of a form is wrapped in a useCallback, but I dont see the reason why someone would do that, any idea?

Milu • Jun 16 '20 • Edited

Hello there! The only reason I can think of is that whoever is implementing the code, does not want their handleFormSubmit() function to be created every time the component re-renders. I found this article where they use the useCallback() hook in a handleFormSubmit() to stop tree invalidation issues. However, I haven't encountered issues when creating a form without using useCallback in the past.