react-windowで大量データのリスト表示を爆速にする

「react-window」を使って、大量データを高速にスクロール表示する方法を紹介します。

はじめに

react-window は、React で大量データを扱う際に高速なレンダリングを可能にするパッケージです。例えば、数千、数万、数十万件のリストを表示する場合でも、react-window を使うことで、スムーズなスクロールと高速なレンダリングを実現できます。react-window を使用するには、List、Grid、Table などのコンポーネントを使用することができます。

例えば、Infinite List は、非常に長いリストを表示するためのコンポーネントです。通常、リスト全体をレンダリングすると、パフォーマンスが低下するため、画面に表示される範囲内だけをレンダリングするように設定されています。これにより、スクロール中に必要な部分だけがレンダリングされ、非常に長いリストでもスムーズにスクロールできます。

また、Variable Size List は、アイテムの高さが一定でないリストを表示するためのコンポーネントです。例えば、メッセージのスレッドやタイムラインなど、高さが異なるアイテムを表示する際に使用することができます。このコンポーネントは、アイテムの高さに応じてスクロールバーの位置を調整し、スムーズで正確なスクロールを実現します。

さらに、Grid コンポーネントは、2 次元データを表示するためのコンポーネントで、行と列の両方のサイズが可変であることができます。このコンポーネントは、大量のデータを表示する場合や、複数の列や行を表示する必要がある場合に便利です。

react-window を使用することで、パフォーマンスが向上し、大量のデータを効率的に処理することができます。

react-windowのインストール

まず、react-windowをインストールする。

# Yarn
yarn add react-window

# NPM
npm install --save react-window

TypeScriptの方は、こちらの型定義もインストールします。

npm install --save @types/react-window

スポンサーリンク

List表示のサンプルコード

以下は、Infinite List を使用したサンプルコードです。この例では、100万件のアイテムを持つリストをレンダリングしています。

import React from 'react';
import { FixedSizeList as List } from 'react-window';

function App() {
  const items = Array.from({ length: 1000000 }).map((_, index) => `アイテム ${index}`);

  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index]}
    </div>
  );

  return (
    <List height={600} itemCount={1000000} itemSize={35} width={400}>
      {Row}
    </List>
  );
}

export default App;

この例では、100万件のリストをレンダリングしていますが、画面に表示されている範囲内のみがレンダリングされるため、処理速度が非常に高速です。また、スクロール中に必要なアイテムだけがレンダリングされるため、メモリの使用量が最小限に抑えられます。

Grid表示のサンプルコード

以下は、Grid を使用したサンプルコードです。この例では、1000行×100列のテーブルをレンダリングしています。

import React from 'react';
import { FixedSizeGrid as Grid } from 'react-window';

function App() {
  const items = Array.from({ length: 100000 }).map((_, index) => `アイテム ${index}`);

  const Cell = ({ columnIndex, rowIndex, style }) => (
    <div style={style}>
      {items[rowIndex * 100 + columnIndex]}
    </div>
  );

  return (
    <Grid
      columnCount={100}
      height={600}
      rowCount={1000}
      rowHeight={35}
      columnWidth={100}
      width={600}
    >
      {Cell}
    </Grid>
  );
}

export default App;

この例では、1000行×100列のテーブルをレンダリングしていますが、画面に表示されている範囲内のみがレンダリングされるため、処理速度が非常に高速です。また、行と列のサイズが可変であるため、様々なテーブルを簡単にレンダリングすることができます。