Optimizing Re-renders with React.memo

import { ____, useState } from 'react';

interface ItemListProps {
  items: string[];
}

// Wrap this component to prevent unnecessary re-renders
const ItemList = ____(({ items }: ItemListProps) => {
  console.log('ItemList rendered');
  return (
    <div>
      <h3>Items:</h3>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
});

interface ExpensiveDisplayProps {
  value: number;
}

// This component does an expensive calculation
const ExpensiveDisplay = ____(({ value }: ExpensiveDisplayProps) => {
  console.log('ExpensiveDisplay rendered');
  
  // Simulate expensive calculation
  let result = value;
  for (let i = 0; i < 1000000; i++) {
    result += 0.0001;
  }
  
  return <div>Processed value: {result.toFixed(2)}</div>;
});

export default function CounterApp() {
  const [count, setCount] = useState(0);
  const [items] = useState(['Apple', 'Banana', 'Cherry']);
  const [fixedValue] = useState(100);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ItemList items={items} />
      <ExpensiveDisplay value={fixedValue} />
    </div>
  );
}