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.
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 :)