Virtualized List in React: Render Only Visible Rows on Scroll

import { useMemo, useState, useCallback, useRef } from 'react';

interface VirtualRange {
  startIndex: number;
  endIndex: number;
  totalHeight: number;
  offsetY: number;
}

interface Options {
  itemCount: number;
  itemHeight: number;
  containerHeight: number;
  overscan?: number;
}

export function useVirtualList(opts: Options) {
  const { itemCount, itemHeight, containerHeight, overscan = 3 } = opts;
  const [scrollTop, setScrollTop] = useState(0);
  const frame = useRef<number | null>(null);

  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const next = e.currentTarget.scrollTop;
    if (frame.current != null) return;
    frame.current = requestAnimationFrame(() => {
      frame.current = null;
      setScrollTop(next);
    });
  }, []);

  const range: VirtualRange = useMemo(() => {
    const visibleCount = Math.ceil(containerHeight / itemHeight);
    const first = Math.floor(scrollTop / itemHeight);
    const startIndex = Math.max(0, first - overscan);
    const endIndex = Math.min(itemCount - 1, first + visibleCount + overscan);
    return {
      startIndex,
      endIndex,
      totalHeight: itemCount * itemHeight,
      offsetY: startIndex * itemHeight,
    };
  }, [scrollTop, itemCount, itemHeight, containerHeight, overscan]);

  return { ...range, handleScroll };
}

import React from 'react';
import { useVirtualList } from './useVirtualList';

interface VirtualListProps<T> {
  items: T[];
  itemHeight: number;
  height: number;
  overscan?: number;
  renderItem: (item: T, index: number) => React.ReactNode;
}

const Row = React.memo(function Row(props: {
  top: number;
  height: number;
  children: React.ReactNode;
}) {
  return (
    <div
      style={{
        position: 'absolute',
        top: props.top,
        left: 0,
        right: 0,
        height: props.height,
      }}
    >
      {props.children}
    </div>
  );
});

export function VirtualList<T>(props: VirtualListProps<T>) {
  const { items, itemHeight, height, overscan, renderItem } = props;
  const { startIndex, endIndex, totalHeight, handleScroll } = useVirtualList({
    itemCount: items.length,
    itemHeight,
    containerHeight: height,
    overscan,
  });

  const rows = [];
  for (let i = startIndex; i <= endIndex; i++) {
    rows.push(
      <Row key={i} top={i * itemHeight} height={itemHeight}>
        {renderItem(items[i], i)}
      </Row>
    );
  }

  return (
    <div
      onScroll={handleScroll}
      style={{ height, overflow: 'auto', position: 'relative' }}
    >
      <div style={{ height: totalHeight, position: 'relative' }}>{rows}</div>
    </div>
  );
}