DEV Community

⚡️React Performance Optimization: useMemo vs useCallback

Ahmed Murtaza on January 08, 2023

useCallback and useMemo are both React Hooks that help optimize the performance of a React application by memoizing values. They both accept a func...

Read full post

Potpot • Jan 9 '23 • Edited

In your first example, handleClick will get recreated each time you click the button. You may change it to this:

const handleClick = useCallback(() => {
  setCount((old) => old + 1);
}, []); // dependency is also eliminated

Raí B. Toffoletto • Jan 26 '23

Or Simply not use the hook. There's no reason to memoize this kind on function. 😉

Kirill Sadovnikov • Jan 9 '23

Hook useCallback uses useMemo under the hood

Chris Frewin • Jan 9 '23

Do we have any benchmarks on how much more "optimized" this really is? I can't imagine how much performance is lost between:

const handleClick = useCallback(() => {
  setCount((old) => old + 1);
}, []);

and

const handleClick = () => {
  setCount((old) => old + 1);
}

If it isn't negligible, it has to be pretty close to it. I'd suppose any latency from things like fetching and so on make stuff like this pretty close to irrelevant. Would love to hear anyone's insights or reports from real app world.

Layton Whiteley • Jan 12 '23

I think it's not just the recreation of the function that you would need to take into consideration but the fact that not memoizing functions you pass to other components can cause them to also re-render unnecessarily. If that said component is heavy then it also degrades performance.

Just my two cents ;)

Chris Frewin • Jan 12 '23

But doesn't React already handle that anyway via props? If you're props to said component (or the component's own state) aren't changing, react isn't going to re-render anything

Diego Betto • Jan 12 '23

But if the parent changes without child's props changing?
I think it can help in this case.

Layton Whiteley • Jan 12 '23 • Edited

@fullstackchris There is a misconception there in what you think isnt changing.

React checks referential integrity to determine if a property has changed/not.

for each render the function's reference will be changed. Therefore, each time the parent re-renders it will pass a new function to the sub component and this component will think the function is new and changed since last render.

When you wrap the function in useCallback then it only changes the reference of the function when the dependencies change

Layton Whiteley • Jan 12 '23 • Edited

PS:

This is essentially what React does to check equality by default

// falsy checks
Object.is({}, {}) // false
Object.is(() => {}, () => {}) // false

// same reference checks
const obj = {};
Object.is(obj, obj) // true

// primitives

Object.is(1, 1) // true

Gil Fewster • Jan 8 '23

Very clear explanation of the subtle difference between these two hooks. Nice one!

Ahmed Murtaza • Jan 8 '23

Thanks Gil :)

Gouthami • Sep 5 '24

Awesome explanation! Thank you!

React Hunter • Jan 12 '23

Great article!
It described the difference clearly, haha
Thank you

Ahmed Murtaza • Jan 12 '23

Thanks, glad you found this helpful! :)

Erkand Imeri • Jan 13 '23

How did you get the processedData inside useMemo? Perhaps another example would have been better. Because you are returning the memoized function name declaration.

Matt Barnicle • Apr 20 '23 • Edited

The comment he wrote just above the return statement for processedData states that it's just a placeholder for some code where you would take the inputted data var, do some processing on it, save the results in processedData, and then return that var. It would have been more clear if he gave that var a different name though, for the name to be different than the memoized function name.