Understanding useMemo and useCallback

Published on 17.6.2019

As React apps grow in complexity, performance optimization becomes an important aspect of development. React’s declarative nature and frequent re-renders can sometimes result in slower applications, especially when dealing with expensive computations or functions being passed down as props.

Thankfully, React provides two useful hooks—useMemo and useCallback—that help with memoization and optimizing performance. These hooks are designed to reduce unnecessary calculations and re-renders, ultimately improving the speed and efficiency of your app.

In this post, we’ll take a look at what useMemo and useCallback are, how they work, and when you should use them to improve performance.

---

What Is Memoization and Why Does It Matter in React?

Memoization is a technique that stores the result of expensive function calls and returns the cached result when the same inputs occur again. In React, this can be extremely useful for optimizing components that re-render frequently, especially when those components involve expensive calculations or functions.

By memoizing values or functions, React can avoid unnecessary re-calculations or re-creations of objects and functions on each render, improving the overall performance of your application.

---

What Is useMemo?

The useMemo hook allows you to memoize the result of a function. When used correctly, it ensures that the result of a computation is only recalculated when the dependencies change. This can be especially useful for optimizing expensive computations that don’t need to be recalculated on every render.

Here’s the basic syntax for useMemo:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• The first argument is a function that performs the expensive computation.
• The second argument is an array of dependencies, and the hook will only re-run the function if one of the dependencies changes.

---

When to Use useMemo

You should use useMemo when you have an expensive function or calculation that you don’t want to run on every render. It’s especially useful when the calculation is dependent on props or state, and you want to ensure that React doesn’t perform the computation again if the values haven’t changed.

Example 1: Memoizing a Computation

Suppose you have a component that performs a complex calculation:

import React, { useState, useMemo } from 'react';

function ExpensiveCalculation() {
  const [num1, setNum1] = useState(1);
  const [num2, setNum2] = useState(1);

  // Memoize the result of an expensive calculation
  const expensiveResult = useMemo(() => {
    console.log('Calculating...');
    return num1 * num2; // A simple calculation for demonstration
  }, [num1, num2]); // Recalculate only when num1 or num2 changes

  return (
    <div>
      <p>Result: {expensiveResult}</p>
      <button onClick={() => setNum1(num1 + 1)}>Increment num1</button>
      <button onClick={() => setNum2(num2 + 1)}>Increment num2</button>
    </div>
  );
}

• Here, expensiveResult is recalculated only when either num1 or num2 changes, thanks to the useMemo hook. Without useMemo, React would recompute num1 * num2 on every render, which can be a performance hit in a real-world scenario with more complex logic.

When Not to Use useMemo

You shouldn’t use useMemo in every case, especially for trivial computations. React’s default re-rendering is quite optimized, so don’t use useMemo prematurely—always profile the performance first. Overusing useMemo can lead to unnecessary complexity and may actually hurt performance in some cases.

---

What Is useCallback?

The useCallback hook is similar to useMemo, but instead of memoizing values, it memoizes functions. Specifically, it returns a memoized version of the function that only changes if one of its dependencies changes.

Here’s the basic syntax for useCallback:

const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

• The first argument is the function that you want to memoize.
• The second argument is the dependency array, and the function is memoized as long as the dependencies don’t change.

---

When to Use useCallback

You should use useCallback when you want to avoid re-creating a function on every render, especially if the function is passed down to child components or used in effects. Recreating functions unnecessarily can cause unnecessary renders and reduce performance.

Example 2: Memoizing a Function

Let’s say you’re passing a function as a prop to a child component. By default, a new function instance is created on every render. This can be inefficient, especially if the child component is memoized or if the function is passed down multiple levels.

import React, { useState, useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  // Memoize the function to prevent unnecessary re-creation on every render
  const increment = useCallback(() => setCount(count + 1), [count]);

  return <Child increment={increment} />;
}

const Child = React.memo(({ increment }) => {
  console.log('Child re-rendered');
  return <button onClick={increment}>Increment</button>;
});

export default Parent;

• Without useCallback, the increment function would be re-created on every render, causing Child to re-render unnecessarily.
• By wrapping increment with useCallback, React ensures that the function is only recreated when count changes, reducing unnecessary renders of Child.

When Not to Use useCallback

As with useMemo, overusing useCallback can be counterproductive. If the function being passed down is simple and doesn’t lead to unnecessary renders, you might not need useCallback. It’s always best to use it when you are dealing with a performance bottleneck.

---

Performance Considerations and Best Practices

1. Profile First:
   Don’t pre-optimize your code. Measure performance first to determine if useMemo or useCallback is necessary. React’s default re-rendering is usually fast enough for most applications.
2. Use useMemo and useCallback for Expensive Operations:
   If you have expensive computations or functions that depend on changing values, memoize them to prevent unnecessary recalculations or recreations.
3. Avoid Overuse:
   Don’t use these hooks everywhere. Sometimes the performance benefits are minimal, and they can add unnecessary complexity to your code. Always question whether you really need to optimize.
4. Use with Child Components:
   If you are passing functions or complex values down to child components, memoization can help prevent unnecessary re-renders.

---

Conclusion

useMemo and useCallback are powerful hooks in React that allow you to optimize your app’s performance by memoizing expensive values and functions. By preventing unnecessary recalculations and re-creations, these hooks help keep your app responsive and efficient.

However, be cautious with their use. It’s important to profile your application and ensure that performance bottlenecks are actually being addressed before adding these hooks. Overuse can lead to unnecessary complexity, and React’s default optimization is often enough in most cases.

By understanding when and how to use useMemo and useCallback, you can build faster, more efficient React applications that scale gracefully as they grow in complexity.

Happy coding!