React 無限スクロールライブラリ：性能、実装、アーキテクチャ比較

react-infinite-scroll-component、react-infinite-scroller、react-window-infinite-loader は、React で無限スクロールを実装する代表的なライブラリですが、根本的なアプローチが異なります。実際の開発現場で直面する問題にどう対応するか、技術的な観点から比較します。

🏗️ 基本アーキテクチャ：仮想化の有無

react-infinite-scroll-component は DOM にすべてのアイテムをレンダリングします。

• 実装がシンプルで理解しやすい
• 数据量が増えるとパフォーマンスが低下
• 検索やフィルタリングが容易

// react-infinite-scroll-component: 全アイテムをレンダリング
import InfiniteScroll from 'react-infinite-scroll-component';

function UserList({ users, fetchMore, hasMore }) {
  return (
    <InfiniteScroll
      dataLength={users.length}
      next={fetchMore}
      hasMore={hasMore}
      loader={<h4>読み込み中...</h4>}
    >
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </InfiniteScroll>
  );
}

react-infinite-scroller も同様に全アイテムをレンダリングします。

• 依存関係が軽量
• window スクロールと要素スクロールの両方をサポート
• 大規模データには非推奨

// react-infinite-scroller: 全アイテムをレンダリング
import InfiniteScroll from 'react-infinite-scroller';

function UserList({ users, fetchMore, hasMore }) {
  return (
    <InfiniteScroll
      pageStart={0}
      loadMore={fetchMore}
      hasMore={hasMore}
      loader={<div key={0}>読み込み中...</div>}
    >
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </InfiniteScroll>
  );
}

react-window-infinite-loader は仮想化を使用して表示中のアイテムのみをレンダリングします。

• react-window と連携して高性能を実現
• 数千件のデータでもスムーズに動作
• 実装の複雑さが増加

// react-window-infinite-loader: 仮想化で表示中のみのレンダリング
import InfiniteLoader from 'react-window-infinite-loader';
import { FixedSizeList } from 'react-window';

function UserList({ users, fetchMore, hasMore }) {
  const isItemLoaded = index => !hasMore || index < users.length;
  
  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={hasMore ? users.length + 1 : users.length}
      loadMoreItems={fetchMore}
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          height={600}
          itemCount={users.length}
          itemSize={50}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {({ index, style }) => (
            <div style={style} key={users[index]?.id}>
              {users[index]?.name || '読み込み中...'}
            </div>
          )}
        </FixedSizeList>
      )}
    </InfiniteLoader>
  );
}

📊 データ管理：状態の持ち方

データの状態管理方法もライブラリ間で異なります。

react-infinite-scroll-component は親コンポーネントで状態を管理します。

• dataLength props で現在のアイテム数を通知
• 状態管理の責任は開発者に委ねられる
• Redux や Context との統合が容易

// react-infinite-scroll-component: 親で状態管理
function UserList() {
  const [users, setUsers] = useState([]);
  const [page, setPage] = useState(1);
  
  const fetchMore = async () => {
    const newUsers = await api.getUsers(page + 1);
    setUsers([...users, ...newUsers]);
    setPage(page + 1);
  };
  
  return (
    <InfiniteScroll
      dataLength={users.length}
      next={fetchMore}
      hasMore={users.length < total}
    >
      {users.map(user => <UserCard key={user.id} user={user} />)}
    </InfiniteScroll>
  );
}

react-infinite-scroller も同様に親コンポーネントで状態を管理します。

• pageStart で現在のページを追跡
• 古い API 設計（クラスコンポーネント時代の名残り）

// react-infinite-scroller: 親で状態管理
function UserList() {
  const [users, setUsers] = useState([]);
  const [page, setPage] = useState(0);
  
  const fetchMore = async () => {
    const newUsers = await api.getUsers(page + 1);
    setUsers([...users, ...newUsers]);
    setPage(page + 1);
  };
  
  return (
    <InfiniteScroll
      pageStart={page}
      loadMore={fetchMore}
      hasMore={users.length < total}
    >
      {users.map(user => <UserCard key={user.id} user={user} />)}
    </InfiniteScroll>
  );
}

react-window-infinite-loader はアイテムのロード状態をライブラリが管理します。

• isItemLoaded で各アイテムのロード状態を判定
• loadMoreItems がバッチ処理をサポート
• より細かい制御が可能

// react-window-infinite-loader: ライブラリがロード状態を管理
function UserList() {
  const [users, setUsers] = useState({});
  
  const isItemLoaded = index => users[index] !== undefined;
  
  const loadMoreItems = async ({ startIndex, stopIndex }) => {
    const newUsers = await api.getUsers(startIndex, stopIndex);
    setUsers(prev => ({ ...prev, ...newUsers }));
  };
  
  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={total}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          height={600}
          itemCount={total}
          itemSize={50}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {({ index, style }) => (
            <div style={style} key={index}>
              {users[index]?.name || '読み込み中...'}
            </div>
          )}
        </FixedSizeList>
      )}
    </InfiniteLoader>
  );
}

⚡ パフォーマンス特性：描画コストとメモリ使用量

パフォーマンスは無限スクロール実装で最も重要な考慮事項です。

react-infinite-scroll-component のパフォーマンス特性：

• 1000 件程度までは問題なく動作
• 5000 件を超えるとスクロールが重くなる可能性
• メモリ使用量がデータ量に比例して増加
• シンプルな実装のためオーバーヘッドが少ない

// react-infinite-scroll-component: 大量データでの注意点
function UserList() {
  const [users, setUsers] = useState([]);
  
  // ⚠️ 10000 件を超えるとパフォーマンス低下のリスク
  const fetchMore = async () => {
    if (users.length > 5000) {
      console.warn('パフォーマンス低下の可能性があります');
    }
    const newUsers = await api.getUsers(users.length);
    setUsers([...users, ...newUsers]);
  };
  
  return (
    <InfiniteScroll
      dataLength={users.length}
      next={fetchMore}
      hasMore={true}
      scrollThreshold={0.9} // 90% スクロールでトリガー
    >
      {users.map(user => <UserCard key={user.id} user={user} />)}
    </InfiniteScroll>
  );
}

react-infinite-scroller のパフォーマンス特性：

• react-infinite-scroll-component と同様の制限
• 追加の機能が少ない分、若干軽量
• 長期的なメンテナンスに懸念

// react-infinite-scroller: 性能制限への対応
function UserList() {
  const [users, setUsers] = useState([]);
  
  const fetchMore = async () => {
    // ⚠️ 大量データでは仮想化ライブラリの使用を検討
    if (users.length > 3000) {
      console.warn('react-window-infinite-loader への移行を検討してください');
    }
    const newUsers = await api.getUsers(users.length);
    setUsers([...users, ...newUsers]);
  };
  
  return (
    <InfiniteScroll
      pageStart={0}
      loadMore={fetchMore}
      hasMore={users.length < total}
      useWindow={true} // window スクロールを使用
    >
      {users.map(user => <UserCard key={user.id} user={user} />)}
    </InfiniteScroll>
  );
}

react-window-infinite-loader のパフォーマンス特性：

• 表示中のアイテム（通常 20〜50 件）のみをレンダリング
• 10 万件以上のデータでもスムーズに動作
• メモリ使用量が一定に保たれる
• 初期設定のオーバーヘッドがある

// react-window-infinite-loader: 大規模データに最適化
function UserList() {
  const [users, setUsers] = useState({});
  const TOTAL_ITEMS = 100000;
  
  const isItemLoaded = index => users[index] !== undefined;
  
  const loadMoreItems = async ({ startIndex, stopIndex }) => {
    // バッチ処理で効率的にデータ取得
    const newUsers = await api.getUsersBatch(startIndex, stopIndex);
    setUsers(prev => ({ ...prev, ...newUsers }));
  };
  
  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={TOTAL_ITEMS}
      loadMoreItems={loadMoreItems}
      minimumBatchSize={10} // 一度にロードする最小アイテム数
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          height={600}
          itemCount={TOTAL_ITEMS}
          itemSize={50}
          onItemsRendered={onItemsRendered}
          ref={ref}
          overscanCount={5} // 表示範囲外のバッファ
        >
          {({ index, style }) => (
            <div style={style} key={index}>
              {users[index]?.name || '読み込み中...'}
            </div>
          )}
        </FixedSizeList>
      )}
    </InfiniteLoader>
  );
}

🔄 スクロール位置の保持：ページ遷移後の復元

実務ではページ遷移後にスクロール位置を保持する必要がある場合があります。

react-infinite-scroll-component はスクロール位置の保持が容易です。

• 標準的な DOM 要素として動作
• scrollTop を直接制御可能
• 履歴管理との統合が簡単

// react-infinite-scroll-component: スクロール位置保持
function UserList() {
  const scrollRef = useRef(null);
  const [scrollPosition, setScrollPosition] = useState(0);
  
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollPosition;
    }
  }, []);
  
  const handleScroll = () => {
    if (scrollRef.current) {
      setScrollPosition(scrollRef.current.scrollTop);
    }
  };
  
  return (
    <div
      ref={scrollRef}
      onScroll={handleScroll}
      style={{ height: '600px', overflow: 'auto' }}
    >
      <InfiniteScroll
        dataLength={users.length}
        next={fetchMore}
        hasMore={hasMore}
        scrollableTarget={scrollRef.current}
      >
        {users.map(user => <UserCard key={user.id} user={user} />)}
      </InfiniteScroll>
    </div>
  );
}

react-infinite-scroller も同様にスクロール位置を制御できます。

• useWindow props で window/要素スクロールを切り替え
• 要素スクロールの場合、getScrollParent で制御

// react-infinite-scroller: スクロール位置保持
function UserList() {
  const containerRef = useRef(null);
  
  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.scrollTop = savedPosition;
    }
  }, []);
  
  return (
    <div ref={containerRef} style={{ height: '600px', overflow: 'auto' }}>
      <InfiniteScroll
        pageStart={0}
        loadMore={fetchMore}
        hasMore={hasMore}
        useWindow={false} // 要素スクロールを使用
        getScrollParent={() => containerRef.current}
      >
        {users.map(user => <UserCard key={user.id} user={user} />)}
      </InfiniteScroll>
    </div>
  );
}

react-window-infinite-loader は仮想化のためスクロール位置の制御が特殊です。

• scrollToItem メソッドを使用
• インデックスベースで位置を指定
• 復元時にアイテムがロードされている必要がある

// react-window-infinite-loader: スクロール位置保持
function UserList() {
  const listRef = useRef(null);
  const targetIndex = useRef(0);
  
  useEffect(() => {
    if (listRef.current && targetIndex.current > 0) {
      listRef.current.scrollToItem(targetIndex.current, 'start');
    }
  }, [users]);
  
  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={total}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          height={600}
          itemCount={total}
          itemSize={50}
          onItemsRendered={onItemsRendered}
          ref={listRef}
        >
          {({ index, style }) => (
            <div style={style} key={index}>
              {users[index]?.name || '読み込み中...'}
            </div>
          )}
        </FixedSizeList>
      )}
    </InfiniteLoader>
  );
}

🎨 UI カスタマイズ：ローダーとエンド表示

ローディング状態や終了時の表示も重要な UX 要素です。

react-infinite-scroll-component のカスタマイズ：

• loader props でローディング表示を指定
• endMessage props で終了メッセージを表示
• 完全に制御可能

// react-infinite-scroll-component: UI カスタマイズ
<InfiniteScroll
  dataLength={users.length}
  next={fetchMore}
  hasMore={hasMore}
  loader={
    <div className="loader">
      <Spinner />
      <p>データを読み込んでいます...</p>
    </div>
  }
  endMessage={
    <div className="end-message">
      <p>🎉 全てのデータを表示しました</p>
    </div>
  }
  pullDownToRefresh={true}
  refreshFunction={handleRefresh}
>
  {users.map(user => <UserCard key={user.id} user={user} />)}
</InfiniteScroll>

react-infinite-scroller のカスタマイズ：

• loader props でローディング表示を指定
• 終了メッセージは自分で実装が必要
• シンプルな構造

// react-infinite-scroller: UI カスタマイズ
<InfiniteScroll
  pageStart={0}
  loadMore={fetchMore}
  hasMore={hasMore}
  loader={
    <div className="loader" key={0}>
      <Spinner />
      <p>データを読み込んでいます...</p>
    </div>
  }
>
  {users.map(user => <UserCard key={user.id} user={user} />)}
  {!hasMore && (
    <div className="end-message" key="end">
      <p>🎉 全てのデータを表示しました</p>
    </div>
  )}
</InfiniteScroll>

react-window-infinite-loader のカスタマイズ：

• ローディング状態はアイテムレベルで管理
• 終了表示は自分で実装が必要
• より細かい制御が可能

// react-window-infinite-loader: UI カスタマイズ
<InfiniteLoader
  isItemLoaded={isItemLoaded}
  itemCount={hasMore ? users.length + 1 : users.length}
  loadMoreItems={fetchMore}
>
  {({ onItemsRendered, ref }) => (
    <FixedSizeList
      height={600}
      itemCount={hasMore ? users.length + 1 : users.length}
      itemSize={50}
      onItemsRendered={onItemsRendered}
      ref={ref}
    >
      {({ index, style }) => {
        if (index >= users.length) {
          return (
            <div style={style} key="loader">
              <Spinner />
              <p>データを読み込んでいます...</p>
            </div>
          );
        }
        return (
          <div style={style} key={users[index].id}>
            <UserCard user={users[index]} />
          </div>
        );
      }}
    </FixedSizeList>
  )}
</InfiniteLoader>

🌐 共通点：3 ライブラリの共有機能

これらのライブラリには多くの共通点もあります。

1. ⚛️ React コンポーネントとして実装

• すべて関数コンポーネントまたはクラスコンポーネントとして使用可能
• React のライフサイクルと統合
• Hooks との併用が可能

// 3 ライブラリ共通：React コンポーネントとして使用
function UserList({ users, fetchMore, hasMore }) {
  // どのライブラリでも同様のパターンで使用可能
  return (
    <InfiniteScrollComponent
      // 各ライブラリの props を設定
    >
      {users.map(user => <UserCard key={user.id} user={user} />)}
    </InfiniteScrollComponent>
  );
}

2. 📱 両方向スクロールサポート

• window スクロールと要素スクロールの両方をサポート
• useWindow または scrollableTarget で制御
• モバイルデバイスでも動作

// window スクロールの場合
<InfiniteScroll useWindow={true}>
  {/* 内容 */}
</InfiniteScroll>

// 要素スクロールの場合
<div style={{ height: '600px', overflow: 'auto' }}>
  <InfiniteScroll useWindow={false}>
    {/* 内容 */}
  </InfiniteScroll>
</div>

3. 🔄 非同期データ読み込み

• next、loadMore、loadMoreItems でデータ取得をトリガー
• Promise ベースの非同期処理をサポート
• エラーハンドリングは開発者側で実装

// 3 ライブラリ共通：非同期データ読み込みパターン
const fetchMore = async () => {
  try {
    const newItems = await api.getData(page);
    setItems([...items, ...newItems]);
  } catch (error) {
    console.error('データ取得エラー:', error);
    // エラー状態の管理は開発者側で
  }
};

4. ✅ TypeScript サポート

• すべて TypeScript 定義ファイルを提供
• 型安全性を確保可能
• IDE での補完が利用可能

// TypeScript での使用例（3 ライブラリ共通）
interface User {
  id: number;
  name: string;
}

interface Props {
  users: User[];
  fetchMore: () => Promise<void>;
  hasMore: boolean;
}

function UserList({ users, fetchMore, hasMore }: Props) {
  // 型チェックが機能
}

5. 🎯 スクロールトリガー閾値

• スクロール位置の閾値を設定可能
• 早期にデータを読み込むことで UX を向上
• scrollThreshold props で制御

// スクロール閾値の設定（対応ライブラリ）
<InfiniteScroll
  scrollThreshold={0.8} // 80% スクロールでトリガー
  // 早期読み込みでユーザー待機時間を削減
>
  {/* 内容 */}
</InfiniteScroll>

📊 比較サマリー表

💡 最終推奨

データ量とパフォーマンス要件で選択しましょう：

• 1000 件未満のリスト → react-infinite-scroll-component（シンプルで十分）
• 既存プロジェクトの維持 → react-infinite-scroller（変更コストを考慮）
• 1000 件以上の大規模データ → react-window-infinite-loader（性能が最優先）
• エンタープライズアプリケーション → react-window-infinite-loader（安定性と拡張性）

重要なポイント：無限スクロール実装では、初期の開発速度よりも長期的なパフォーマンスとメンテナンス性を重視すべきです。プロジェクトの規模と成長を見据えて、適切なライブラリを選択しましょう。