TanStack Virtual v3 動的な高さを持つコンテンツ

https://zenn.dev/yukiyuki1126/articles/5893fb113c9c14
この内容の続きになります。

リストの内容のサイズが可変のものの場合、estimateSizeだけではうまく表示がされない。

TanStack Virtualでは、動的な高さを設定するために以下の方法を使用します。

1. estimateSizeオプションで初期の高さを推定する
2. measureElementメソッドで実際の高さを計測する

具体的な手順は以下の通りです。

1. VirtualizerのオプションでestimateSizeを指定し、アイテムの初期の高さを推定します。

const virtualizer = useVirtualizer({
  count,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 45, // アイテムの初期の高さを45pxと推定
})

2. 仮想化リストのアイテムを描画する際に、measureElementというrefを指定します。

	{items.map((virtualRow) => (
  <div
    key={virtualRow.key}
    data-index={virtualRow.index}
    ref={virtualizer.measureElement} // measureElementを指定
    className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
  >
    {/* アイテムの内容 */}
  </div>
))}

可変となる要素に対してrefを設定する。

3. measureElementが呼ばれると、TanStack Virtualはアイテムの実際の高さを計測し、仮想化リストの状態を更新します。

これにより、初期の高さはestimateSizeで推定した値になりますが、実際に描画された後はmeasureElementで計測した実際の高さが使用されます。

ただし、動的な高さを使用する場合は、スクロールの挙動が不安定になる可能性があるため、注意が必要です。可能な限り、アイテムの高さは固定にすることが推奨されます。

また、動的な高さを使用する場合は、estimateSizeで推定する高さは、アイテムの最大の高さに設定することが推奨されます。これにより、スクロール時に不自然な挙動が発生するのを防ぐことができます。