infinite-scroll virtualizer

import { useWindowVirtualizer } from "@tanstack/react-virtual";

const GridWithVirtualization = () => {
  const items = [...];

  const totalCount = 1000;
  
  // Window-based virtualizer
  const virtualizer = useWindowVirtualizer({
    count: items.length + (items.length < totalCount ? 1 : 0),
    estimateSize: () => 350,
    overscan: 5,
    measureElement: (el) => el?.getBoundingClientRect().height || 350,
  });

  // Load more when reaching bottom
  useEffect(() => {
    const [lastItem] = [...virtualizer.getVirtualItems()].reverse();
    if (lastItem?.index >= items.length - 1 && items.length < totalCount) {
      loadMoreData();
    }
  }, [virtualizer.getVirtualItems()]);

  return (
    <div className="grid grid-cols-2 gap-4">
      {virtualizer.getVirtualItems().map(virtualRow => {
        const item = items[virtualRow.index];
        return item ? <ItemCard key={virtualRow.index} item={item} /> : <Skeleton />;
      })}
    </div>
  );
};

import { useWindowVirtualizer } from "@tanstack/react-virtual";

const GridWithVirtualization = () => {
  const items = [...];

  const totalCount = 1000;
  
  // Window-based virtualizer
  const virtualizer = useWindowVirtualizer({
    count: items.length + (items.length < totalCount ? 1 : 0),
    estimateSize: () => 350,
    overscan: 5,
    measureElement: (el) => el?.getBoundingClientRect().height || 350,
  });

  // Load more when reaching bottom
  useEffect(() => {
    const [lastItem] = [...virtualizer.getVirtualItems()].reverse();
    if (lastItem?.index >= items.length - 1 && items.length < totalCount) {
      loadMoreData();
    }
  }, [virtualizer.getVirtualItems()]);

  return (
    <div className="grid grid-cols-2 gap-4">
      {virtualizer.getVirtualItems().map(virtualRow => {
        const item = items[virtualRow.index];
        return item ? <ItemCard key={virtualRow.index} item={item} /> : <Skeleton />;
      })}
    </div>
  );
};