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

// BEFORE the fix: ExpensiveList re-renders every time count changes,
// visible via "Highlight updates" or a Profiler recording — because
// it isn't wrapped in memo AND items is a brand-new array every render.
//
// const ExpensiveList = function ExpensiveList({ items }) {
//   return <ul>{items.map((item) => <li key={item}>{item}</li>)}</ul>;
// };

// AFTER the fix:
const ExpensiveList = memo(function ExpensiveList({ items }) {
  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>
      <ExpensiveList items={items} />
    </div>
  );
}

export default App;

/*
  Notes:
  - Before applying memo + useMemo: open React DevTools, enable
    "Highlight updates when components render," click the count
    button, and watch ExpensiveList flash on every click despite its
    own data never changing.
  - After: memo(ExpensiveList) combined with the stable items
    reference from useMemo means clicking count no longer flashes
    ExpensiveList at all — confirmed visually, without writing any
    separate measurement code.
*/