Open16
Tanstack Virtualでスクロール時に長時間のブロッキングが発生する症状について
ピン留めされたアイテム
ken7253前提条件
CPUの実行速度が遅い端末などで、スクロール時の再レンダリングが非常に遅い現象があった。
確認環境としては ChromeのDevtoolsでCPUスロットリング x20 で実行した際に再描画に1s以上かかってしまうという感じ。
ken7253ここでreact-domのflushSyncが呼び出されているので結構な計算コストになりそう。
ken7253ワークアラウンド
const virtualizer = useVirtualizer({
count: 200,
getScrollElement: () => ref.current,
estimateSize: () => 120,
overscan: 7,
// ここのコールバックの第二引数に false を渡すとOK
observeElementOffset: (_, cb) => cb(0, false),
});
これだと、スクロール時に更新が行われなくなってしまったので直接パッチを適用して検証してみる。
@tanstack/react-virtual/dist/esm/index.js
...options,
onChange: (instance2, sync) => {
var _a;
- if (sync) {
- flushSync(rerender);
- } else {
+ // if (sync) {
+ // flushSync(rerender);
+ // } else {
rerender();
- }
+ // }
(_a = options.onChange) == null ? void 0 : _a.call(options, instance2, sync);
}
};
公式ドキュメント
ken7253
onChangeのsyncはどこから渡されるのか
ken7253
ここの引数に入ってくるsyncのでどころ調査。
ken7253ここのオプションは下記で@tanstack/virtual-coreからインポートされているVirtualizerインスタンス化するときに渡されているっぽいので@tanstack/virtual-coreに移動する。
ken7253ここらへんがVirtualizerClass
ken7253Virtualizer.notify()というプライベートメソッドによってonChangeに指定したコールバックが実行されるっぽい。
ただ、ここでもsyncは引数なので更に定義を調べる。
ken7253更にVirtualizer.notify()はVirtualizer.maybeNotify()から呼ばれている。
ここのVirtualizer.maybeNotify()ではmemoという関数が呼ばれているがこれはreactのメモ化ではなく独自に定義したメモ化関数っぽい。
memo()の定義はここ。
ken7253memo()は第一引数に依存配列を取得する関数を定義すると、第二引数のコールバックの引数に依存配列が渡されるようになる。
memo(
() => ['foo', 2],
(foo, num) => console.log(foo, num);
// => 'foo' 2
);
この前提を持って、改めてmaybeNotify()を見てみる。
そうすると、ここで渡されているのはthis.isScrollingであることが分かる。