Virtualize long listsVirtualize long lists

Same list, two DOM sizes

Press Mount, then Restyle and Scroll test.

import { useVirtualizer } from '@tanstack/react-virtual'

export function VirtualMarketList({ markets }: { markets: Market[] }) {
  const parentRef = useRef<HTMLDivElement>(null)

  const virtualizer = useVirtualizer({
    count: markets.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,  // Estimated row height
    overscan: 5  // Extra items to render
  })

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.index}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualRow.size}px`,
              transform: `translateY(${virtualRow.start}px)`
            }}
          >
            <MarketCard market={markets[virtualRow.index]} />
          </div>
        ))}
      </div>
    </div>
  )
}

Overscan hides the blank edge

Press Fling down, then try overscan 4 and 20.

useVirtualizer({
  count: markets.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 56,
  overscan: 5, // rows kept mounted past each edge: 5 × 56 = 280px of runway
})

The estimate is the scrollbar

Move the estimate off the real height, then Jump to end.

const virtualizer = useVirtualizer({
  count: markets.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 140,
  overscan: 5,
})

{virtualizer.getVirtualItems().map((virtualRow) => (
  <div
    key={virtualRow.key}
    data-index={virtualRow.index}
    ref={virtualizer.measureElement} // no fixed height: the row reports its own
    style={{
      position: 'absolute', top: 0, left: 0, width: '100%',
      transform: `translateY(${virtualRow.start}px)`,
    }}
  >
    <MarketCard market={markets[virtualRow.index]} />
  </div>
))}

Why it matters, pros and cons