【React】React Virtuosoライブラリの紹介とReact Windowライブラリとの比較

はじめに

こんにちは、ナオキです！
前回Reactのライブラリである「React Window」についての紹介をしたことがあります。
個人的には「React Window」よりも「React Virtuoso」の方が使いやすいと思っているので今回は「React Virtuoso」について説明しようと思います！
React Windowと同様にDOM要素の多いリスト表示やグリッド表示を扱うときに役立つライブラリとなっています。
React Windowとの違いについても簡単に説明しています。ぜひ参考にしてください！

参考

【React】React Windowの紹介とリストの作成方法

ISSEN

対象読者

• WEB開発を行っている方

React Virtuosoの概要(公式ドキュメント翻訳)

React Virtuosoは、仮想化レンダリングを使って大きなデータセットを表示するReactコンポーネントのセットです。Virtuosoコンポーネントは、可変サイズのアイテムやアイテムのサイズの変更を自動的に処理します。

react-virtuoso NPM パッケージには、フラットリスト (Virtuoso)、スティッキーヘッダー付きグループ化リスト (GroupedVirtuoso)、レスポンシブレイアウトのグリッド (VirtuosoGrid)、テーブル (TableVirtuoso) が含まれます。パッケージは使用していない不要なコードを削除できるので、参照しないコンポーネントによってバンドルが膨らむことはありません。

React Virtuosoについて

Reactアプリケーションで沢山のDOM要素を表示する際に表示パフォーマンスを改善するためのライブラリです。
通常多くの要素を一度に表示をしようとすると、表示されるまでに時間がかかってしまいますが、React Virtuosoを使用したらその問題が解決できます！

具体的にいうと、React Virtuosoは画面の表示領域に入っている要素のみをレンダリングします。これにより一度にレンダリングされる量が減り、パフォーマンス改善が見込めます！

React Windowと用途は同じです。違いについては後ほど説明します！

React Virtuosoのコンポーネント(パッケージ)

React Virtuosoには以下のコンポーネントがあります。

• Virtuoso
• Grouped Virtuoso
• Table Virtuoso
• Virtuoso Grid

それぞれの用途を簡単に説明します！

開発の要件を分析し用途にあわせて使用するコンポーネントを選びましょう！

React VirtuosoとReact Windowの比較(2024年3月段階)

実装面での違い

React WindowではDOM要素のサイズが固定か可変かで使用するコンポーネント(パッケージ)の使い分けをし、propsとしてitemSize等を記述しなければいけませんでした。
それにくらべてReact Virtuosoは要素の高さを自動で可変対応してくれる機能が備わっているのでReact Windowよりも必要なProps少なく、より簡単に実装することができます。

React Virtuosoには豊富なAPIがあるので、カスタマイズしやすいのも良い点です。

個人的に両方を実装してみた感想を述べますと、React Virtuosoのほうが記述量が少なく、シンプルなので使いやすいなと思いました。

Weeklyダウンロード数

Weeklyダウンロード数はReact Windowのほうが多いです。
React Virtuosoは比較的新しいライブラリなのでダウンロード数が劣っています。

Star数

Star数もダンロード数と同じようにReact Virtuosoの方が後発のライブラリなので劣っています。

最終更新日

ライブラリ選定をする際に最終更新日を気にする方は多いと思います。
更新頻度が高いに越したことはないですね！

パッケージサイズ

パッケージサイズはReact Windowの方が小さいです。
React Virtuosoの方が大きいですが、React Virtuosoの提供する機能を考慮すると適切なサイズだと思います！

公式ドキュメントの読みやすさ

公式ドキュメントの読みやすさでいうと、React Virtuosoの方が機能ごとに型の説明など詳細に書かれているので読みやすいです。
使用するライブラリを理解するうえで公式ドキュメントの読みやすさは、とても重要だとおもいます！
気になる方は以下の公式ドキュメントを参照してください！

開発環境

• react: “18.2.0”
• react-virtuoso: “^4.7.4”
• tailwindcss: “^3.3.3”

ライブラリの使用方法

まず以下のコードでReact Virtuosoをインストールします。
今回はnpmを用いてインストールしています。

$ npm install react-virtuoso

次にリストのDOM要素を用意します。
今回は、要素の高さをindexの偶数、奇数で変えています。
高さが固定でも可変でも同じコンポーネントを使用できるのと、可変でもPropsを付け加える必要がないのがとても便利でReact Virtuosoが使いやすいポイントだと思います。
スタイリングはTailWindCssを使用しています。

<div
  className={`${index % 2 === 0 ? "h-[50px]" : "h-[100px]"} flex flex-col items-center justify-center border`}
>
  <p>user: {index}</p>
  <p>age: 〇〇</p>
</div>

DOM要素が用意できたらVirtuosoコンポーネントをreact-virtuosoからインポートし、要素の親に記述します。
要素はVirtuosoのPropsであるitemContentの返り値として記述します。
今回は要素でindexを表示させたいのでindexを渡しています！

import { Virtuoso } from "react-virtuoso"

export default function List() {
  return (
    <Virtuoso
      itemContent={(index) => (
        <div
          className={`${index % 2 === 0 ? "h-[50px]" : "h-[100px]"} flex flex-col items-center justify-center border`}
　　　　　>
          <p>user: {index}</p>
          <p>age: 〇〇</p>
　　　　　</div>
      )}
    />
  )
}

次にVirtuosoのPropsであるstyleとtotalCountを使用します。今回はheight: 400 width: 250を指定しています。
styleは表示させたい領域をheightとwidthを使用して指定します。
totalCountは要素の数を指定できます。今回は要素を1000個に指定しました。

import { Virtuoso } from "react-virtuoso"

export default function List() {
  return (
    <Virtuoso
      style={{ height: 400, width: 250 }}
      totalCount={1000}
      itemContent={(index) => (
        <div 
          className={`${index % 2 === 0 ? "h-[50px]" : "h-[100px]"} flex flex-col items-center justify-center border`}
　　　　　>
          <p>user: {index}</p>
          <p>age: 〇〇</p>
        </div>
      )}
    />
  )
}

以上のコードで簡単なリストの作成ができました！

さいごに

今回はReact Virtuosoライブラリの紹介とReact Windowライブラリとの違いについて説明しました。
使用方法を見てもらえると、すごく簡単で扱いやすいライブラリだということが理解していただけたと思います！
開発をしていて一覧画面を作成する機会は多々あると思います。そのときにパフォーマンス改善として、React Virtuosoを使用してみてはどうでしょうか！

スポンサーリンク