What is the useMemo hook in React?

React

The short answer

useMemo memoizes the result of a computation. It runs the function you give it and caches the return value. On subsequent renders, it returns the cached value instead of re-running the function — unless one of the dependencies has changed. It is used to avoid expensive recalculations on every render.

The problem it solves

Every time a component re-renders, all the code inside it runs again. For simple operations, this is not a problem. But if you have a heavy computation, running it on every render wastes time.

function ProductList({ products, filter }) {
  // This runs on EVERY render, even if products and filter
  // have not changed
  const filteredProducts = products
    .filter((p) => p.category === filter)
    .sort((a, b) => a.price - b.price);
  return (
    <ul>
      {filteredProducts.map((p) => (
        <li key={p.id}>
          {p.name} - ${p.price}
        </li>
      ))}
    </ul>
  );
}

If the parent re-renders for some unrelated reason (maybe a different piece of state changed), the filtering and sorting runs again even though products and filter have not changed.

How useMemo fixes this

function ProductList({ products, filter }) {
  const filteredProducts = useMemo(() => {
    return products
      .filter((p) => p.category === filter)
      .sort((a, b) => a.price - b.price);
  }, [products, filter]);
  return (
    <ul>
      {filteredProducts.map((p) => (
        <li key={p.id}>
          {p.name} - ${p.price}
        </li>
      ))}
    </ul>
  );
}

Now the filtering and sorting only runs when products or filter changes. If the component re-renders for any other reason, useMemo returns the cached result.

useMemo vs useCallback

They are very similar. The difference is what they memoize:

  • useMemo memoizes a value (the result of a function)
  • useCallback memoizes a function (the function itself)
// useMemo — caches the result of the function
const sortedItems = useMemo(() => items.sort(), [items]);
// useCallback — caches the function itself
const handleClick = useCallback(() => {
  console.log('clicked');
}, []);

In fact, useCallback(fn, deps) is the same as useMemo(() => fn, deps).

When to use useMemo

Use it when:

  • You have an expensive calculation (sorting, filtering, complex math)
  • The result is passed to a memoized child component as a prop
  • You create a new object or array that is used in a dependency array of another hook

Do NOT use it when:

  • The calculation is simple (adding numbers, string concatenation)
  • You are memoizing something that changes on every render anyway
  • You have not measured an actual performance problem
// Do NOT do this — useMemo is overkill here
const fullName = useMemo(() => {
  return `${firstName} ${lastName}`;
}, [firstName, lastName]);
// Just compute it directly
const fullName = `${firstName} ${lastName}`;

Common Pitfalls

A common mistake is using useMemo everywhere "just in case." Memoization has a cost — React has to store the cached value, compare dependencies, and manage the cache. For cheap operations, this overhead is more expensive than just recalculating the value. Only use useMemo when you have a measured performance issue or a genuinely expensive computation.

Interview Tip

When explaining useMemo, show an example with a clearly expensive operation (like filtering a large list) to make the benefit obvious. Also explain the difference between useMemo and useCallback — interviewers often ask this as a follow-up. The key point is: useMemo caches a value, useCallback caches a function.

Why interviewers ask this

useMemo tests whether you understand React's rendering model and performance optimization. Interviewers want to see if you know when expensive operations need to be memoized, if you can tell the difference between useMemo and useCallback, and if you have the discipline to only optimize when there is a real problem. Overusing useMemo is a red flag that shows the candidate does not understand the tradeoffs.

Table of Contents