React Programming Tutorials, Guides & Best Practices

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>;
}

In this example, the square of the number is only recalculated when number changes, avoiding unnecessary computations.