VariableSizeList：行の高さを動的に扱う

行の高さが一様でない場合があります。たとえば、チャットリストに短いメッセージと長いメッセージが混在したり、フィードにコンテンツ量の異なるカードが含まれたりする場合です。FixedSizeList は 1 つの固定された itemSize を前提とするため、このような状況には対応できません。

このような場合に備えて、react-window には各項目が独自のサイズを指定できるリスト型があります。

VariableSizeList は FixedSizeList と同じように動作しますが、項目ごとのサイズを受け取ります。代わりに VariableSizeList を import し、指定された index のサイズを返す関数を渡します。

それ以外の children の render 関数や重要な style prop は変わらないため、移行は小規模で済みます。

VariableSizeList では、itemSize は index を受け取り、その行の高さをピクセル単位で返す関数です。react-window はこの関数を呼び出してオフセットを計算し、表示ウィンドウを決定します。

これにより、既知の高さを指定できます。たとえば、画像がある項目には高い行を、通常のテキストには低い行を設定できます。

各行の高さがあらかじめわかっている場合は、itemSize 関数からその値を直接返せます。高さがレンダリングされたコンテンツに依存する場合は、行が描画された後に測定しなければなりません。

事前に計算した高さは最もシンプルで高速です。測定した高さは柔軟性に優れますが、サイズをリストに戻すための追加処理が必要です。

VariableSizeList はパフォーマンスのために項目のオフセットをキャッシュします。測定した高さが変わった場合は、ref に対してリストの resetAfterIndex メソッドを呼び出し、その index 以降の位置を再計算させる必要があります。

これを忘れると古いオフセットが残り、行の位置がずれます。そのため、resetAfterIndex は動的な測定を機能させるための重要なメソッドです。

ここには、鶏が先か卵が先かという問題があります。行をレンダリングするには高さが必要ですが、実際の高さがわかるのはレンダリング後です。測定するには、まずリストが行を配置しなければなりません。

この問題を解決するには、まず推定値でレンダリングし、実際の高さがわかった時点で修正する必要があります。

標準的なパターンでは、推定した高さで行をレンダリングし、描画後に ref または ResizeObserver を使って実際の高さを測定し、測定値を保存して、resetAfterIndex を呼び出して位置を更新します。

このループはすぐに収束するため、最初の測定処理の後にはリストが正しいオフセットに落ち着きます。

itemSize 関数は、通常は useCallback でラップして、レンダリング間で安定させる必要があります。そうしないと、リストがキャッシュしたオフセットを常に無効化してしまいます。

インラインで定義した不安定な関数は、不要な再計算を引き起こし、仮想化によって得られるはずのパフォーマンスを低下させる可能性があります。

VariableSizeList は、一定のオフセットを仮定できず、アイテムごとのサイズを追跡する必要があるため、FixedSizeList より多くの処理を行います。高さを測定する場合は、その追加の測定処理にもコストがかかります。

行の高さが実際に異なるリストでは、このコストをかける価値があります。一方、行が均一なら、FixedSizeList のほうが高速でシンプルな選択肢です。

正確な動的測定のコストが高すぎる場合は、近似できることがあります。行をいくつかの固定高さのクラスに分類したり、妥当な平均値を使用したりすることで、FixedSizeList を使い続けられます。

これはピクセル単位の完全なレイアウト精度と引き換えに、シンプルさと速度を得る方法です。オフセットに多少のずれがあっても許容できる場合には、適切な妥協案となります。

VariableSizeList が各行の高さをどのように知るかを思い出してください。

VariableSizeList は、itemSize としてインデックスを受け取る関数を指定することで、高さの異なる行を処理します。高さは事前に計算することも測定することもできます。測定した高さを使う場合は、resetAfterIndex を用いた「推定・レンダリング・測定・更新」のループが必要です。

useCallback を使って itemSize 関数を安定させてください。FixedSizeList よりコストがかかるため、行の高さが均一な場合や近似で十分な場合は、固定サイズのバリアントを選んでください。