Component

Drawer

Package version

9.57.0

React version

18.3.1

Environment

n/a

Current Behavior

When children are updated Drawer forces a style recalculation.

This seems to be because getScrollState reads values that force layout.

Perhaps this is because there are two calls (1, 2) that will eventually call getScrollState(). Maybe they need to be in a rAF like the onScroll call?

I realize the 1.49ms might not sound like much but this also forces a layout calculation for another 1.73ms meaning we're doing 3.22ms of work that should be handled elsewhere. We're aiming for a 60fps refresh rate in an application (that is 16.67ms for all work in a frame, not just JS) and have observed forced style recalc + layout calc from useDrawerBody taking 5-10ms in some cases.

Expected Behavior

Updates to Drawer should not force style recalculations.

Reproduction

https://stackblitz.com/edit/tkwxyl8r?file=src%2Fexample.tsx

Steps to reproduce

1. Load repro case
2. Open DevTools
3. Click on Performance tab. Start recording a profile
4. Click the "Add child to Drawer" button several times.
5. Stop profile recording.
6. Examine profile.

Here's how to find the forced style recalc

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.