React useMemo Hook returns a memoized value.

It is similar to useCallback Hook. The main difference is useMemo returns a memoized value and useCallback returns a memoized function.

The useMemo Hook only runs when any of its dependencies update.

useMemo can improve performance significantly.

When to use it?

For example, if you have an expensive function like this:

const expensiveFunction = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

This function will run on every render, resulting in slowing down everything. To prevent this, we can memoize its result and return it without recalculating, only recalculating it when num changes.

For this, we will make a state number because we have to give the changing factor as a dependency. Hence, the code would be:

import { useMemo, useState } from "react";
 
const App = () => {
  const [number, setNumber] = useState(0);
  const calculation = useMemo(() => expensiveFunction(number), [number]);
 
  return (
    <div>
      {calculation}
    </div>
  );
};
 
const expensiveFunction = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num = num + i;
  }
  return num;
};
 
export default App;