Virtual List Component

import { useRef, useState } from 'react';
export function VirtualList({ items, rowHeight = 48, visibleRows = 10, renderItem }) {
  const [scrollTop, setScrollTop] = useState(0);
  const startIdx = Math.floor(scrollTop / rowHeight);
  const endIdx   = Math.min(startIdx + visibleRows + 1, items.length);
  return (
    <div style={{ height: visibleRows * rowHeight, overflowY: 'auto' }}
         onScroll={e => setScrollTop(e.currentTarget.scrollTop)}>
      <div style={{ height: items.length * rowHeight, position: 'relative' }}>
        {items.slice(startIdx, endIdx).map((item, i) => (
          <div key={startIdx + i}
               style={{ position: 'absolute', top: (startIdx + i) * rowHeight, height: rowHeight }}>
            {renderItem(item, startIdx + i)}
          </div>
        ))}
      </div>
    </div>
  );
}