React 無限スクロール・仮想リストライブラリ完全比較

大規模なリストデータを React アプリケーションで扱う際、パフォーマンスとユーザー体験の両立が課題になります。react-infinite-scroll-component、react-tiny-virtual-list、react-virtualized、react-window は、この問題を解決するための代表的なライブラリですが、それぞれ設計思想と適したユースケースが異なります。

🎯 基本アプローチ：仮想化の有無

最も重要な違いは、リストの仮想化（virtualization）をサポートしているかです。

react-infinite-scroll-component は仮想化を提供しません。すべてのアイテムが DOM にレンダリングされるため、アイテム数が増えるとパフォーマンスが低下します。

// react-infinite-scroll-component
import InfiniteScroll from 'react-infinite-scroll-component';

function UserList() {
  const [items, setItems] = useState([]);
  
  const fetchMoreData = () => {
    // API から追加データを取得
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={true}
      loader={<h4>読み込み中...</h4>}
    >
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </InfiniteScroll>
  );
}

react-tiny-virtual-list、react-virtualized、react-window は仮想化をサポートします。表示されているアイテムのみをレンダリングするため、数千件以上のデータでもパフォーマンスを維持できます。

// react-tiny-virtual-list
import VirtualList from 'react-tiny-virtual-list';

function UserList() {
  return (
    <VirtualList
      width={500}
      height={300}
      itemCount={items.length}
      itemSize={50}
      renderItem={({ index, style }) => (
        <div key={items[index].id} style={style}>
          {items[index].name}
        </div>
      )}
    />
  );
}

// react-virtualized
import { List } from 'react-virtualized';

function UserList() {
  return (
    <List
      width={500}
      height={300}
      rowCount={items.length}
      rowHeight={50}
      rowRenderer={({ index, key, style }) => (
        <div key={key} style={style}>
          {items[index].name}
        </div>
      )}
    />
  );
}

// react-window
import { FixedSizeList } from 'react-window';

function UserList() {
  return (
    <FixedSizeList
      width={500}
      height={300}
      itemCount={items.length}
      itemSize={50}
    >
      {({ index, style }) => (
        <div style={style}>
          {items[index].name}
        </div>
      )}
    </FixedSizeList>
  );
}

📐 アイテム高さ：固定 vs 可変

アイテムの高さが固定か可変かも、ライブラリ選択の重要な要素です。

react-tiny-virtual-list は固定高さのアイテムに特化しています。可変高さのアイテムには対応していません。

// react-tiny-virtual-list - 固定高さのみ
<VirtualList
  itemSize={50} // 固定値のみ
  renderItem={({ index, style }) => (...)}
/>

react-virtualized は固定・可変両方に対応しています。可変高さの場合は CellMeasurer が必要です。

// react-virtualized - 可変高さ対応
import { List, CellMeasurer, CellMeasurerCache } from 'react-virtualized';

const cache = new CellMeasurerCache({
  fixedWidth: true,
  minHeight: 50
});

<List
  rowHeight={({ index }) => cache.rowHeight({ index })}
  rowRenderer={({ index, key, style, parent }) => (
    <CellMeasurer
      key={key}
      cache={cache}
      parent={parent}
      columnIndex={0}
      rowIndex={index}
    >
      {({ measure }) => (
        <div style={style} onLoad={measure}>
          {items[index].content}
        </div>
      )}
    </CellMeasurer>
  )}
/>

react-window も固定・可変両方に対応しています。可変高さの場合は VariableSizeList を使用します。

// react-window - 可変高さ対応
import { VariableSizeList } from 'react-window';

const listRef = useRef();

<VariableSizeList
  width={500}
  height={300}
  itemCount={items.length}
  itemSize={index => getItemHeight(items[index])}
  ref={listRef}
>
  {({ index, style }) => (
    <div style={style}>
      {items[index].content}
    </div>
  )}
</VariableSizeList>

react-infinite-scroll-component は仮想化しないため、高さの制限はありませんが、パフォーマンスの制約があります。

// react-infinite-scroll-component - 高さ制限なし（ただし非仮想化）
<InfiniteScroll dataLength={items.length} next={fetchMore} hasMore={true}>
  {items.map(item => (
    <div key={item.id}>
      {/* 任意の高さのコンテンツ */}
    </div>
  ))}
</InfiniteScroll>

🔄 無限スクロール機能

無限スクロール機能の提供状況も異なります。

react-infinite-scroll-component は無限スクロール機能がコア機能として組み込まれています。スクロール検知、データローディング、ローディング表示がすべて提供されます。

// react-infinite-scroll-component - 無限スクロール機能内蔵
<InfiniteScroll
  dataLength={items.length}
  next={fetchMoreData}
  hasMore={hasMore}
  loader={<Spinner />}
  endMessage={<p>データがありません</p>}
  scrollThreshold={0.8}
>
  {items.map(item => <Item key={item.id} data={item} />)}
</InfiniteScroll>

react-tiny-virtual-list、react-virtualized、react-window は仮想化に特化しており、無限スクロール機能は提供していません。別途実装が必要です。

// react-window - 無限スクロールは別途実装
const [items, setItems] = useState([]);
const [hasMore, setHasMore] = useState(true);

const loadMore = () => {
  if (!hasMore) return;
  fetchMore().then(newItems => {
    setItems(prev => [...prev, ...newItems]);
    if (newItems.length < PAGE_SIZE) setHasMore(false);
  });
};

<FixedSizeList
  itemCount={items.length}
  itemSize={50}
  onItemsRendered={({ visibleStopIndex }) => {
    if (visibleStopIndex >= items.length - 5) loadMore();
  }}
>
  {({ index, style }) => (
    <div style={style}>{items[index].name}</div>
  )}
</FixedSizeList>

// react-virtualized - 無限スクロールは別途実装
<List
  rowCount={items.length}
  rowHeight={50}
  onRowsRendered={({ stopIndex }) => {
    if (stopIndex >= items.length - 5) loadMore();
  }}
  rowRenderer={({ index, key, style }) => (
    <div key={style}>{items[index].name}</div>
  )}
/>

// react-tiny-virtual-list - 無限スクロールは別途実装
<VirtualList
  itemCount={items.length}
  itemSize={50}
  renderScrollContainer={props => (
    <div
      {...props}
      onScroll={e => {
        props.onScroll(e);
        // 無限スクロールロジックをここに追加
      }}
    />
  )}
  renderItem={({ index, style }) => (
    <div style={style}>{items[index].name}</div>
  )}
/>

📦 提供コンポーネントの種類

各ライブラリが提供するコンポーネントの種類も異なります。

react-infinite-scroll-component は単一の InfiniteScroll コンポーネントのみを提供します。

// react-infinite-scroll-component - 単一コンポーネント
import InfiniteScroll from 'react-infinite-scroll-component';
<InfiniteScroll>{/* 任意のコンテンツ */}</InfiniteScroll>

react-tiny-virtual-list も単一の VirtualList コンポーネントのみを提供します。

// react-tiny-virtual-list - 単一コンポーネント
import VirtualList from 'react-tiny-virtual-list';
<VirtualList {/* 設定とレンダラー */} />

react-virtualized は多様なコンポーネントを提供します（現在は非推奨）。

// react-virtualized - 多様なコンポーネント
import { List, Grid, Table, Collection, AutoSizer } from 'react-virtualized';

<List>{/* 1D リスト */}</List>
<Grid>{/* 2D グリッド */}</Grid>
<Table>{/* テーブル */}</Table>
<AutoSizer>{/* 自動サイズ調整 */}</AutoSizer>

react-window も多様なコンポーネントを提供しますが、よりモダンな設計です。

// react-window - 多様なコンポーネント
import { 
  FixedSizeList, 
  VariableSizeList, 
  FixedSizeGrid, 
  VariableSizeGrid,
  AutoSizer 
} from 'react-window';

<FixedSizeList>{/* 固定高さリスト */}</FixedSizeList>
<VariableSizeList>{/* 可変高さリスト */}</VariableSizeList>
<FixedSizeGrid>{/* 固定サイズグリッド */}</FixedSizeGrid>
<AutoSizer>{/* 自動サイズ調整 */}</AutoSizer>

⚠️ メンテナンス状況と推奨

react-virtualized は現在メンテナンスモードです。公式ドキュメントと npm ページで、新しいプロジェクトでは react-window の使用が推奨されています。

// ⚠️ react-virtualized - 新規プロジェクトでは非推奨
// 既存プロジェクトの維持管理のみに使用を検討
import { List } from 'react-virtualized';

react-window は react-virtualized の作者によって作成された後継ライブラリで、活発にメンテナンスされています。

// ✅ react-window - 新規プロジェクトで推奨
import { FixedSizeList } from 'react-window';

react-infinite-scroll-component と react-tiny-virtual-list は継続してメンテナンスされていますが、使用ユースケースが限定的です。

📊 比較サマリー

💡 実装ガイドライン

100 件以下のリスト

アイテム数が少ない場合、仮想化のオーバーヘッドが不要なことがあります。

// 単純な map で十分
{items.slice(0, 100).map(item => (
  <div key={item.id}>{item.name}</div>
))}

100〜1000 件のリスト、無限スクロールが必要

react-infinite-scroll-component が適しています。

import InfiniteScroll from 'react-infinite-scroll-component';

<InfiniteScroll
  dataLength={items.length}
  next={fetchMore}
  hasMore={hasMore}
>
  {items.map(item => <Item key={item.id} data={item} />)}
</InfiniteScroll>

1000 件以上のリスト、固定高さアイテム

react-window の FixedSizeList が最適です。

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={items.length}
  itemSize={50}
>
  {({ index, style }) => (
    <div style={style}>{items[index].name}</div>
  )}
</FixedSizeList>

1000 件以上のリスト、可変高さアイテム

react-window の VariableSizeList が適しています。

import { VariableSizeList } from 'react-window';

const listRef = useRef();

<VariableSizeList
  ref={listRef}
  height={600}
  itemCount={items.length}
  itemSize={index => getItemHeight(items[index])}
>
  {({ index, style }) => (
    <div style={style}>{items[index].content}</div>
  )}
</VariableSizeList>

グリッドレイアウトが必要

react-window の FixedSizeGrid または VariableSizeGrid を使用します。

import { FixedSizeGrid } from 'react-window';

<FixedSizeGrid
  columnCount={10}
  columnWidth={100}
  rowCount={100}
  rowHeight={50}
  width={1000}
  height={500}
>
  {({ columnIndex, rowIndex, style }) => (
    <div style={style}>
      {items[rowIndex * 10 + columnIndex]}
    </div>
  )}
</FixedSizeGrid>

🎯 最終推奨

新規プロジェクトでは、react-window を第一選択肢としてください。モダンな設計、活発なメンテナンス、優れたパフォーマンスを備えています。

無限スクロールのみが必要で、アイテム数が少ない場合は、react-infinite-scroll-component の使用を検討できますが、将来的なパフォーマンス問題に注意してください。

既存の react-virtualized プロジェクトは、段階的に react-window への移行を計画してください。両ライブラリの API は似ているため、移行コストは比較的低く抑えられます。

最小限の依存関係が求められるシンプルなユースケースでは、react-tiny-virtual-list が有効ですが、機能制限を理解した上で使用してください。