React — useMemo Hook

useMemo is a React Hook that memorizes a computed value, preventing expensive calculations on every render.

Use it to optimize performance for heavy computations.

import React, { useMemo } from 'react';

function ExpensiveComponent({ num }) {
  const factorial = useMemo(() => {
    const compute = (n) => (n <= 1 ? 1 : n * compute(n - 1));
    return compute(num);
  }, [num]);

  return <p>Factorial of {num} is {factorial}</p>;
}