Optimizing Overscan Counts to Reduce Render Load

Present a code example that explains how to optimize overscan counts in TanStack Virtual, effectively reducing the number of items rendered outside of the viewport.

import { useVirtual } from 'tanstack-virtual';

function VirtualList({ items }) {
  // Initialize the virtualizer with the total number of items
  const virtualRow = useVirtual({
    size: items.length,
    // Setting the overscan count to a modest value
    // Overscan refers to the number of items rendered outside of the current viewport
    // A balanced value ensures items are ready just before they enter the viewport
    // without rendering too many unnecessary items
    overscan: 5,
  });

  return (
    <div style={{ height: '500px', overflow: 'auto' }}>
      <div style={{ height: virtualRow.totalSize }}> // The container adapting its size
        {virtualRow.virtualItems.map(virtualItem => (
          // Each item positioned absolutely based on its start
          <div key={virtualItem.key} style={{ position: 'absolute', top: 0, left: virtualItem.start }}>
            {items[virtualItem.index]} // Rendering the actual item
          </div>
        ))}
      </div>
    </div>
  );
}

This code demonstrates how to use the TanStack Virtual library to create a virtualized list with optimized overscan. Overscan is set to 5, meaning that five items outside of the current viewport are pre-rendered to ensure a smooth scrolling experience without excessively loading off-screen items. The `virtualRow` object calculates the dynamic positioning and rendering of items based on the scroll position, optimizing performance by limiting unnecessary renders.