@tanstack/react-virtual

What is @tanstack/react-virtual?

The @tanstack/react-virtual npm package is designed to help developers efficiently render large lists and tabular data by virtualizing rows and columns. This means only the items in the viewport plus a small buffer are rendered, significantly improving performance for large datasets.

What are @tanstack/react-virtual's main functionalities?

Virtualized Lists

This feature allows for the rendering of large lists by virtualizing the rows, meaning only the items that are currently in the viewport (plus a small buffer) are rendered. This significantly improves performance for lists with a large number of items.

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

function MyVirtualList() {
  const parentRef = React.useRef();

  const rowVirtualizer = useVirtualizer({
    count: 10000, // Number of items
    getScrollElement: () => parentRef.current,
  });

  return (
    <div ref={parentRef} style={{ height: `150px`, width: `300px`, overflow: 'auto' }}>
      <div style={{ height: rowVirtualizer.getTotalSize() + `px`, width: '100%', position: 'relative' }}>
        {rowVirtualizer.getVirtualItems().map(virtualRow => (
          <div key={virtualRow.index} style={{ position: 'absolute', top: 0, left: 0, width: '100%', transform: `translateY(${virtualRow.start}px)` }}>
            Row {virtualRow.index}
          </div>
        ))}
      </div>
    </div>
  );
}

Virtualized Grids

This feature extends the concept of virtualization to grids, allowing for efficient rendering of large tabular data. Both rows and columns are virtualized, ensuring that only the cells in the viewport are rendered.

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

function MyVirtualGrid() {
  const parentRef = React.useRef();

  const rowVirtualizer = useVirtualizer({
    count: 10000, // Number of items in a row
    getScrollElement: () => parentRef.current,
  });

  const columnVirtualizer = useVirtualizer({
    count: 100, // Number of columns
    getScrollElement: () => parentRef.current,
  });

  return (
    <div ref={parentRef} style={{ height: `150px`, width: `300px`, overflow: 'auto' }}>
      <div style={{ height: rowVirtualizer.getTotalSize() + `px`, width: columnVirtualizer.getTotalSize() + 'px', position: 'relative' }}>
        {rowVirtualizer.getVirtualItems().map(row => (
          {columnVirtualizer.getVirtualItems().map(column => (
            <div key={`${row.index}-${column.index}`} style={{ position: 'absolute', top: `${row.start}px`, left: `${column.start}px`, width: '100%', height: '20px' }}>
              Cell {row.index}, {column.index}
            </div>
          ))}
        ))}
      </div>
    </div>
  );
}

Other packages similar to @tanstack/react-virtual

react-window

React-window is a popular library for virtualizing long lists and tabular data in React applications. It offers similar functionalities to @tanstack/react-virtual but with a different API design and potentially less flexibility in handling dynamic sizes and complex grid structures.

react-virtualized

React-virtualized is another comprehensive library for virtualizing lists and tables in React. It provides a wide range of components and utilities for virtualization, including auto-sizing, dynamic row heights, and more. Compared to @tanstack/react-virtual, react-virtualized might offer more out-of-the-box features but could be heavier and more complex to integrate for simple use cases.