Virtualized Picker recalculates its layout several times for each visible option when it opens

オープン
  • 何か問題がありますか？
#10,858 コメント 5 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@mangeshraut712 がすでに取り組んでいます。

2026年10月27日 から。

  • #10872 @mangeshraut712 による — オープン
  • #10886 @nwidynski による — オープン

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
58/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
frontend, performance

調査の方向性

Start by reading useVirtualizerItem and tracing its calls to isElementVisible() and getSize(); reproduce the Picker opening with the linked demo and inspect the Chrome Performance recording. The issue describes measuring visible options in a shared pass. Done looks like one layout measurement pass for the visible options and fewer repeated style recalculations and layouts.

索引モデルが issue の本文から書いたものです。

説明

Provide a general summary of the issue here

When a Picker opens, the browser works out the page's styles and layout several times for each visible option before the list can be drawn, because useVirtualizerItem measures each option separately.

🤔 Expected Behavior?

Opening the Picker should work out the layout once for all the visible options, not repeatedly for each one.

😯 Current Behavior

useVirtualizerItem measures each visible option in its own layout effect. For each one, isElementVisible() calls checkVisibility(), then getSize() clears node.style.height, reads scrollWidth and scrollHeight, and then sets the height value back again. Because each option changes a style and then reads a size, the browser works out the styles and layout again, several times for every option.

In a Chrome developer tools Performance panel recording of it opening, rendering 17 visible options took 133 layouts and about 150 style recalculations. With the CPU slowed down 4x in Chrome 155, the Picker took 227ms to open, and the page became unresponsive for 162ms of that time. It takes about the same time with 125 items as with 250, so it isn't the number of items that's the problem.

💁 Possible Solution

Measure the visible options in one pass. Clear the heights of all the options that need measuring first, then read all their sizes, then put the
heights back, so the browser only works out the layout once.

🔦 Context

I was measuring how quickly some different design systems open a country selector, with the CPU slowed down 4x to roughly match a mid-range phone. React Spectrum's Picker uses virtualization, so I expected it to be one of the fastest, but it was the second slowest to open, and the page was unresponsive for 162ms of the time it took to open up.

On lower-end devices, that pause comes straight after the user clicks the Picker, so it makes the whole app feel slow to respond. Since the issue doesn't depend on the number of items, it affects every Picker, not just ones with long lists, and a fix in seVirtualizerItem would help any app that uses it.

🖥️ Steps to Reproduce
  1. Clone the reproduction repo I made here: https://github.com/denodell/react-spectrum-picker-open-repro
  2. Run npm install, then npm start, and open the page it serves.
  3. In the Performance panel of Chrome's developer tools, set CPU throttling to 4x and press Record.
  4. Click the Picker to open it, then stop the recording.
  5. The main thread shows a long run of short Recalculate style and Layout events, and in the "Bottom-Up" tab, notice that checkVisibility is near the top, called from isElementVisible in useVirtualizerItem.
Version

@adobe/react-spectrum 3.47.6, react-aria 3.53.0, React 19.3.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Golden Gate

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

主要言語
TypeScript
スター
16k
フォーク
1.6k
平均マージ
3日 9時間
マージ済み PR（30日）
45

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

adobe/react-spectrum のほかの issue

adobe/react-spectrum の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。