🧢

無限スクロールにはReact-Virtuosoが良さそう🧩

2023/04/19に公開

結論

タイトルにもありますが無限スクロールのUI実装にはreact-virtuosoが良さそう

テーブルとグリッドを切り替える事ができる一覧ビューのUIをページネーションから無限スクロールに変更する必要があった。またUI実装は基本的にMUIを活用することが前提です。

ページネーション(現状のUI)
- Datagrid(free plan)とPaginationを使いテーブルのUIを実装(この記事ではDataGridの詳細については言及しません)
- 1ページ(1テーブル)に20件ずつ表示
- muiのdatagridサンプルのFooterがbasic-paginationに置き換わるイメージ
無限スクロール(変更後のUI)
- 1テーブル(1ページ)に対してテーブルの最下部のスクロール毎に20件ずつアイテムが増加する

現在テーブルに使用しているコンポーネント(Datagrid-free plan)で次の問題が発生した。

1ページに描画できるデータ数が99件(react-data-grid/pagination/#size-of-the-page)のため無限スクロールに対応が出来ない。
free planでは無限スクロールの関数(infinite loading - onRowsScrollEnd)の使用を許可されていない
グリッド(マトリクス)ビューで結局無限スクロールの実装が必要になる

まず、100件以上にデータ表示対応するためには、以下2つのどちらかを採用するか検討する必要がある。

この2つの案で発生しそうな作業と懸念点をざっと書いてみる。

1について

2について

結果、無限スクロールのためだけに課金する必要がないと判断したのと、グリッドビューで無限スクロールの判定を実装することが必要なので、DataGrid Proにアップデートするのはやめました。

次にどの無限スクロールライブラリを活用するかの比較を行う。
10 Best React Infinite Scroll Libraries in 2023から3つピックアップして比較してみた。

選んだ基準は以下3点です

name	無限スクロール例	備考
react-virtualized	https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader	- muiで使用しているテーブルをvirtualizedからvirtuosoに移行にした模様なので少し古そう - sample実装ではclassコンポーネントで記述されているため少し読みづらい
react-virtuoso	https://virtuoso.dev/endless-scrolling/	- endReached(最下部判定)やinitialTopMostItemIndex(初期表示のスクロール位置指定)などの便利そうなプロパティが用意されている - typescript with hooksで書かれている
TanStack Table	https://tanstack.com/table/v8/docs/examples/react/virtualized-infinite-scrolling	- 無限スクロールを自前で実装する必要がある - (例はあるがよく見るとvirtuosoのendReachedのようなものが用意されていなかった)