Virtualized List Rendering

Description

Rendering thousands of DOM nodes (e.g., 10,000+) will kill performance if you try to render them all at once. In this challenge you’ll build a lightweight virtualized list (windowing) from scratch — no react-window, react-virtualized, or similar libraries. The goal is to only render the rows that are visible (plus a small buffer) so scrolling stays smooth and memory use stays low.

You’ll implement the core virtualization logic, handle scrolling, keep items positioned correctly, and make the API reusable.

Objective

Render 10,000+ items efficiently using windowing (manual virtualization).
That means — only render the items that are visible in the viewport, not the entire list.

No libraries like react-window or react-virtualized.
Build your own lightweight virtualization logic.

Expectations

Accept a large array of items (10,000+).
Only visible items (plus small buffer) are rendered at a time.
Smooth scroll performance.
Container must maintain correct scrollbar height.
Bonus: Support for dynamic row heights.

Props

Prop	Type	Description
`items`	`Array`	Data to render
`itemHeight`	`number`	Height of each row (for fixed height version)
`height`	`number`	Height of visible viewport
`renderItem`	`(item, index) => ReactNode`	Function to render each row

Example Usage

import React from 'react';
import VirtualizedList from './VirtualizedList';

const App = () => {
  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

  return (
    <div style={{ height: '400px', width: '300px', border: '1px solid #ddd' }}>
      <VirtualizedList
        items={items}
        itemHeight={30}
        height={400}
        renderItem={(item) => (
          <div style={{ padding: '8px', borderBottom: '1px solid #eee' }}>
            {item}
          </div>
        )}
      />
    </div>
  );
};

export default App;