React Programming Tutorials, Guides & Best Practices

useMemo is used to memoize the result of a computation, preventing expensive calculations on every render. It re-computes the memoized value only when one of the dependencies has changed.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ number }) {
  const squaredNumber = useMemo(() => {
    console.log('Calculating...');
    return number * number;
  }, [number]);

  return <div>The square of {number} is {squaredNumber}</div>;
}