The difference between useCallback and useMemo: key aspects to be considered

The React hooks, useMemo, and useCallback are very confusing for most developers. Don’t worry; in this article, we’ll break down useCallback vs useMemo in detail, including when you should and shouldn’t use them. We’ll also examine what useMemo vs useCallback does in greater detail.

 

What Does useCallback vs useMemo Do?

 

Both useCallback and useMemo are react hooks used in functional React components. You probably already know and use the more common hooks like useState and useEffect, but the most common difference between useMemo and useCallback and other hooks is memoization. These two hooks are used to handle performance between renders.

 

The fundamental difference between React useMemo vs useCallback is simple. useMemo returns a memoized value, and useCallback returns a memoized callback.

 

Memoization is complicated. It’s similar to a cache for the value returned from a function. When the function is run, it remembers what the results were from when you originally ran it. So, when you need to run the function again with the same arguments, it will give you back the result that was memoized or remembered from the beginning.

 

Think of it as storing the results from a function in a variable and then using the variable instead of calling the function each and every time.

 

Why Use useCallback and useMemo?

 

When you have created a function or a variable in your component and it gets rerendered, the values will be lost until you pass it to the next render. This is what useMemo and useCallback do so that the results and functions don’t get called again and again. Using these hooks is much simpler and easier than trying to create your own version of this. That being said, you wouldn’t use this for simple functions. You should also consider the lifespan of your app. Most React applications run every time you refresh your browser, so it’s a very short amount of time. There isn’t much to gain from remembering a simple value.

 

The Difference between useCallback and useMemo

 

Let’s break down the differences between React useCallback vs useMemo. Both hooks accept a function and an array of dependencies. However, useMemo will memoize the value that is returned, but useCallback will memoize the function.

 

If you have a complex and resource-heavy piece of code that takes a long time to run, accepts arguments and returns a value, you need to use useMemo. useMemo will help you reference the value without re-running the code again between renders until the arguments change. Similarly, if you need a function to persist between renders, you will deploy useCallback. useCallback will remember the instance of that function. (It’s similar to creating a function outside the scope of your React component).

 

The benefit of useMemo and useCallback is that you gain a little performance boost, because it eliminates the need to use extra function calls. However, these hooks come with underlying code. Even though your function gets called less, useMemo or useCallback will be called on every render, because you are adding an additional function on your React component. This code needs to run in order to determine whether or not to run your function to arrive at a new value. It could happen that the code needed in memoizing your function/value can be much larger than the code in your own function. You’ll have to make a call each time, but it’s best to avoid using useMemo and useCallback unless you are working with really resource-heavy functions and can’t optimize or reduce the number of times it will be called.

 

Don’t use useMemo or useCallback instead of a bug fix, either. If your component is being rendered more often than it ought to be, you should look for the root cause of the error instead of trying to work around the issue with hooks.

Summary

 

Let’s recap what we’ve learned.

 

  • useMemo and useCallback are React hooks. Both use memoization.
  • Memoization can be compared to caching.
  • useMemo will memoize the value returned from a function, useCallback will memoize the function.

 

useMemo and useCallback can give you a performance boost, but it can also slow you down, depending on the nature of your work. Choose wisely when deciding to deploy useCallback vs useMemo, and don’t use it lightly! You may end up achieving the opposite result that you intended to.