Optimizing Expensive Calculations with useMemo

import { useState, _______ } from 'react';

interface NumberStatsProps {
  numbers: number[];
}

// Simulates an expensive calculation
function calculateSum(numbers: number[]): number {
  console.log('Calculating sum...');
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

export function NumberStats({ numbers }: NumberStatsProps) {
  const [renderCount, setRenderCount] = useState(0);

  // Memoize the expensive sum calculation
  const sum = __________...;

  // Memoize the average calculation which depends on sum
  const average = __________...;

  return (
    <div>
      <h2>Number Statistics</h2>
      <p>Count: {numbers.length}</p>
      <p>Sum: {sum}</p>
      <p>Average: {average.toFixed(2)}</p>
      <button onClick={() => setRenderCount(renderCount + 1)}>
        Force Re-render ({renderCount})
      </button>
    </div>
  );
}