import { useState } from 'react';

type Props = {
  value: number;
};

const ExpensiveItem: React.FC<Props> = ({ value }) => {
  console.log('ExpensiveItem: render');
  let total = 0;
  for (let i = 0; i < 5_000_000; i++) {
    total += i % 10;
  }

  return (
    <div>
      {value} - {total}
    </div>
  );
};

const App: React.FC = () => {
  console.log('App render');
  const [count, setCount] = useState(0);

  const items = [1, 2, 3];

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment: {count}</button>

      {items.map((n) => (
        <ExpensiveItem key={n} value={n} />
      ))}
    </div>
  );
};

export default App;

