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!
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 :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great article.
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!
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 :)