75Implement a virtualized list rendering 100,000 items efficiently

Rendering 100,000 <div>s freezes the page. Build <VirtualList items={items} itemHeight={40} height={400} overscan={3} renderItem={(item, index) => …} /> that renders only the rows that are visible, plus a few extra (overscan) above and below.

• The scroll container is a <div data-testid="viewport"> with the given height and overflow: auto.
• Inside it, a spacer <div data-testid="spacer"> is items.length * itemHeight pixels tall, so the scrollbar looks right.
• Each rendered row is absolutely positioned at top = index * itemHeight, has data-index={index}, and contains renderItem(item, index).

Requirements

• With 100,000 items, only about height / itemHeight + 2 * overscan rows exist in the DOM.
• Scrolling updates which rows are rendered.
• Never render indexes below 0 or beyond the last item.
• Rows must be keyed by index, so React reuses DOM nodes efficiently while scrolling.