The Complete Production SOP: How to Deploy and Run TanStack Virtual High-Throughput Window & List Virtualization in Autonomous AI Agents

---
name: "react-virtual-window-scroll"
description: "Virtualize infinitely scrolling dynamic-height feeds and grids using @tanstack/react-virtual."
metadata:
  author: "TanStack"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "virtualize infinite list react"
  - "dynamic height virtual list"
  - "usewindowvirtualizer tanstack"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import * as React from 'react';
import { useWindowVirtualizer } from '@tanstack/react-virtual';

interface Post {
  id: string;
  title: string;
  body: string;
}

interface VirtualFeedProps {
  items: Post[];
  hasNextPage: boolean;
  isFetchingNextPage: boolean;
  fetchNextPage: () => void;
}

export const VirtualFeed: React.FC<VirtualFeedProps> = ({
  items,
  hasNextPage,
  isFetchingNextPage,
  fetchNextPage,
}) => {
  const listRef = React.useRef<HTMLDivElement>(null);

  const virtualizer = useWindowVirtualizer({
    count: hasNextPage ? items.length + 1 : items.length,
    estimateSize: () => 120,
    overscan: 5,
    scrollMargin: listRef.current?.offsetTop ?? 0,
  });

  const virtualItems = virtualizer.getVirtualItems();

  React.useEffect(() => {
    const lastItem = virtualItems[virtualItems.length - 1];
    if (!lastItem) return;
    if (lastItem.index >= items.length - 1 && hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [virtualItems, items.length, hasNextPage, isFetchingNextPage, fetchNextPage]);

  return (
    <div ref={listRef} style={{ width: '100%', position: 'relative' }}>
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          width: '100%',
          position: 'relative',
        }}
      >
        {virtualItems.map((virtualRow) => {
          const isLoaderRow = virtualRow.index > items.length - 1;
          const item = items[virtualRow.index];

          return (
            <div
              key={virtualRow.key}
              data-index={virtualRow.index}
              ref={virtualizer.measureElement}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
              }}
            >
              {isLoaderRow ? (
                <div className="p-4 text-center">Loading more items...</div>
              ) : (
                <article className="p-4 border-b border-gray-200">
                  <h2 className="font-bold text-lg">{item.title}</h2>
                  <p className="text-gray-700 mt-2">{item.body}</p>
                </article>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};