import React, { useState } from 'react';

const ExpensiveList = React.memo(function ExpensiveList({ onItemClick }) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      <li onClick={() => onItemClick(1)}>Item 1</li>
      <li onClick={() => onItemClick(2)}>Item 2</li>
    </ul>
  );
});

function Parent() {
  const [count, setCount] = useState(0);

  // A new function is created on every render...
  function handleItemClick(id) {
    console.log('Clicked item', id);
  }

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      {/* ...so ExpensiveList re-renders every time, even though
          React.memo is supposed to skip unchanged props. */}
      <ExpensiveList onItemClick={handleItemClick} />
    </div>
  );
}

export default Parent;