// src/App.jsx
import { memo, useCallback, useMemo, useState } from "react";

const ItemList = memo(function ItemList({ items, onSelect }) {
  console.log("ItemList rendered");
  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={() => onSelect(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
});

function App() {
  const [count, setCount] = useState(0);
  const items = useMemo(() => ["Apple", "Banana", "Cherry"], []);

  // BEFORE the fix, this line alone would defeat memo:
  // const handleSelect = (item) => console.log("selected:", item);

  // AFTER the fix:
  const handleSelect = useCallback((item) => {
    console.log("selected:", item);
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <ItemList items={items} onSelect={handleSelect} />
    </div>
  );
}

export default App;

/*
  Notes:
  - With a plain inline/regular function for handleSelect, a new
    function is created every render, "ItemList rendered" logs every
    time the count button is clicked despite memo, exactly as the
    chapter's warning describes.
  - useCallback(fn, []) keeps the same function reference across
    renders, so ItemList's memo comparison sees onSelect as unchanged
    too, and the re-render is correctly skipped again.
*/