仮想化とデータ取得の組み合わせ

無限スクロールでは、明示的なページボタンでページネーションする代わりに、ユーザーがリストの末尾に近づくと追加のデータを読み込みます。仮想化と組み合わせることで、非常に大きなデータセットもスムーズに閲覧できます。

リストには表示中の行だけを表示し、ユーザーが下端に到達する少し前に、バックグラウンドで新しいデータを取得します。

react-window のリストコンポーネントは、現在レンダリングされているアイテムのインデックスを通知する onItemsRendered コールバックを受け取ります。このコールバックから、表示範囲と overscan 範囲の開始・終了インデックスを取得できます。

このコールバックはスクロール処理への接続点です。生のスクロールイベントを設定しなくても、ユーザーがリストをどこまでスクロールしたかを検知できます。

いつ取得を開始するかを判断するには、onItemsRendered の overscanStopIndex と現在の itemCount を比較します。レンダリング範囲が読み込み済みデータの末尾に近づいたら、追加のデータが必要です。

overscan の終了インデックスを使うと少し先回りできるため、ユーザーが最後の行に実際に到達する少し前に取得を開始できます。

終了インデックスがしきい値を超えたら、たとえば itemCount の画面1つ分以内に入ったら、次のページを取得する関数を呼び出します。複数のリクエストが重複して実行されないように制御してください。

ローディングフラグを使うか、取得処理がすでに進行中かを確認することで、ユーザーがトリガー範囲をスクロールしている間の重複リクエストを防げます。

便利な方法として、データがまだ存在する間は itemCount を読み込み済み件数に 1 を加えた値としてレンダリングできます。追加された行にスピナーを表示すると、取得中であることを知らせられます。

新しいデータが届くと件数が増え、スピナーの行が実際のコンテンツに置き換わるため、スムーズな視覚的フィードバックになります。

関連パッケージの react-window-infinite-loader を使うと、このロジックを任せられます。isItemLoaded、loadMoreItems、itemCount を指定すると、ユーザーが未読み込みの行に近づいたときにローダーを呼び出します。

読み込み済みの範囲を管理する処理や、重複した読み込み呼び出しの防止も行ってくれるため、堅牢な無限スクロールを簡単に実装できます。

未読み込みのインデックスには、空白の代わりにプレースホルダー行やスケルトン行を表示できます。レンダー関数でそのインデックスのアイテムが読み込み済みかを確認し、未読み込みならスケルトンを表示します。

スケルトンはレイアウトを維持し、進行状況を伝えてくれるため、次のページが届くまで空白のままにするよりも優れた操作感になります。

データの取得は失敗することがあるため、適切にエラーを処理してください。末尾に専用のエラー行を表示し、失敗した範囲の読み込み関数を再度呼び出す再試行ボタンを配置できます。

これにより、一時的な失敗が発生してもリストを使い続けられます。また、ページ全体を再読み込みせずに復旧する明確な方法をユーザーに提供できます。

無限リストにデータを供給するページネーションには、一般的に2つの方式があります。オフセットページネーションではページ番号やスキップ数を指定してリクエストします。一方、カーソルページネーションでは、最後に確認したアイテムを指す不透明なカーソルより後のアイテムをリクエストします。

カーソルページネーションは、変化し続けるデータに対して一般的に信頼性が高くなります。アイテムが挿入されたときにオフセットで発生する位置のずれや重複を避けられるためです。

React Query の useInfiniteQuery は、仮想化と自然に組み合わせられます。取得済みのページ、次のカーソル、読み込み状態やエラー状態を管理し、react-window は平坦化したページを効率的にレンダリングします。

ページを1つの配列に平坦化してリストに渡し、onItemsRendered のしきい値から fetchNextPage を呼び出します。これにより、キャッシュと再試行の機能もそのまま利用できます。

仮想化された無限リストで、いつ追加のデータを取得するかを確認してください。

無限スクロールでは、ユーザーが末尾に近づくとページを読み込みます。onItemsRendered がインデックスを通知し、overscanStopIndex と itemCount を比較することで取得のタイミングを判断できます。重複したリクエストは制御して防ぎます。

プレースホルダー行とエラー行を使い、管理処理には react-window-infinite-loader を利用してください。変化し続けるデータにはカーソルページネーションが適しています。React Query の useInfiniteQuery がページ、カーソル、状態を管理し、react-window がレンダリングを担当します。