仮想化ライブラリ virtua の紹介

仮想化とは

何万件とか大量のデータを表示する際に、一度に全部コンポーネントをレンダリングしてしまうとページが重くて動かなくなるので、見えている部分だけコンポーネントをレンダリングする仕組みのことです。

有名なライブラリには react-window とか react-virtualized とかありますが、これらはちょっと古くて、私は普段 react-virtuoso というのを使っています。

今回紹介する virtua は virtuoso よりも簡単に使える分、機能が少ないライブラリです。またReact以外に、Vue・Solid・Sveltにも対応しています。

インストール

1
pnpm i virtua

使い方

<Vitua> コンポーネントをインポートして、仮想化したい要素のその子要素として展開するだけです。簡単！

1
import { VList } from "virtua";
2

3
export const App = () => {
4
  return (
5
    <VList style={{ height: 800 }}>
6
      {Array.from({ length: 1000 }).map((_, i) => (
7
        <div
8
          key={i}
9
          style={{
10
            height: Math.floor(Math.random() * 10) * 10 + 10,
11
          }}
12
        >
13
          {i}番目の要素です
14
        </div>
15
      ))}
16
    </VList>
17
  );
18
};

これだけで高さが可変の要素もちゃんと表示してくれます。

virtuosoのほうはGridやTable、Masonryなどいろいろな表示方法に対応していますが、それらが必要ない場合は virtua のほうが簡単に使えて良いと思います。