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

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

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

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

export default App;

/*
  Notes:
  - useMemo(() => [...], []) computes the items array exactly once and
    returns the same array reference on every subsequent render.
  - Because ItemList is wrapped in memo and its items prop never
    actually changes reference, clicking the count button no longer
    logs "ItemList rendered" — confirmed in the browser console.
*/