useMemo for Optimization

useMemo memoizes expensive calculations so they are only recomputed when dependencies change.

import React, { useMemo, useState } from 'react';

function ExpensiveComponent({ num }) {
  const expensiveResult = useMemo(() => {
    return slowFunction(num);
  }, [num]);

  return <p>Result: {expensiveResult}</p>;
}

function slowFunction(n) {
  console.log('Running slow function...');
  return n * 2;
}

Useful for improving performance in computationally heavy renders.