// --- BEFORE: plain .map() over a large array ---
function PlainList({ items }) {
  return (
    <ul style={{ height: 400, overflow: "auto" }}>
      {items.map((item) => (
        <li key={item.id} style={{ height: 35 }}>
          {item.text}
        </li>
      ))}
    </ul>
  );
}

// --- AFTER: react-window virtualizes the list ---
// npm install react-window
import { FixedSizeList } from "react-window";

function VirtualizedList({ items }) {
  return (
    <FixedSizeList height={400} itemCount={items.length} itemSize={35} width="100%">
      {({ index, style }) => <div style={style}>{items[index].text}</div>}
    </FixedSizeList>
  );
}

function App() {
  const items = Array.from({ length: 2000 }, (_, i) => ({ id: i, text: `Item ${i}` }));

  // return <PlainList items={items} />;       // renders all 2000 <li> elements at once
  return <VirtualizedList items={items} />; // only renders the ~12 rows currently visible
}

export default App;

/*
  Notes:
  - PlainList creates 2000 real DOM <li> elements immediately, even
    though only a dozen or so are ever visible in the 400px scroll area
    at once — noticeably slower to render and scroll.
  - FixedSizeList only renders the handful of rows currently in (or
    just outside) the visible viewport, reusing the same small set of
    DOM nodes as the user scrolls, regardless of how large itemCount is.
*/