@react-aria/virtualizer

What is @react-aria/virtualizer?

@react-aria/virtualizer is a library that provides utilities for efficiently rendering large lists and collections in React applications. It leverages virtualization techniques to only render the visible items, improving performance and reducing memory usage.

What are @react-aria/virtualizer's main functionalities?

Virtualized List

This feature allows you to create a virtualized list where only the visible items are rendered. This improves performance for large lists by reducing the number of DOM elements.

import { useVirtualizer } from '@react-aria/virtualizer';
import { useRef } from 'react';

function VirtualizedList({ items }) {
  const parentRef = useRef();
  const { virtualItems, totalSize } = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35
  });

  return (
    <div ref={parentRef} style={{ overflow: 'auto', height: '400px' }}>
      <div style={{ height: totalSize }}>
        {virtualItems.map(virtualRow => (
          <div
            key={virtualRow.index}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              transform: `translateY(${virtualRow.start}px)`
            }}
          >
            {items[virtualRow.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

Virtualized Grid

This feature allows you to create a virtualized grid where only the visible items are rendered. This is useful for displaying large grids of items efficiently.

import { useVirtualizer } from '@react-aria/virtualizer';
import { useRef } from 'react';

function VirtualizedGrid({ items, columnCount }) {
  const parentRef = useRef();
  const { virtualItems, totalSize } = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100
  });

  return (
    <div ref={parentRef} style={{ overflow: 'auto', height: '400px' }}>
      <div style={{ height: totalSize }}>
        {virtualItems.map(virtualItem => (
          <div
            key={virtualItem.index}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: `${100 / columnCount}%`,
              transform: `translate(${(virtualItem.index % columnCount) * 100}%, ${Math.floor(virtualItem.index / columnCount) * 100}px)`
            }}
          >
            {items[virtualItem.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

Other packages similar to @react-aria/virtualizer

react-window

react-window is a library for efficiently rendering large lists and tabular data in React. It provides similar virtualization techniques to @react-aria/virtualizer but is more focused on simplicity and performance. It offers a smaller API surface and is easier to integrate for basic use cases.

react-virtualized

react-virtualized is a comprehensive library for rendering large lists and collections in React. It offers a wide range of features including grids, tables, and infinite loaders. Compared to @react-aria/virtualizer, it provides more flexibility and customization options but can be more complex to set up and use.

react-infinite-scroll-component

react-infinite-scroll-component is a library for implementing infinite scrolling in React applications. It focuses on loading more items as the user scrolls, rather than virtualizing the entire list. This can be useful for scenarios where data is loaded incrementally from a server.

README

@react-aria/virtualizer

This package is part of react-spectrum. See the repo for more details.