react-aria modals causing layout thrashing?

[janvorwerk]

Hello gents,

I was struggling trying to figure out why one of my app pages is so slow.

One of the things that devtools keep telling me is Forced reflow:

Many APIs, typically reading layout geometry, force the rendering engine to pause script execution in order to calculate the style and layout.

In the devtools, the identified culprits seem to be related to modals, between:

• useViewportSize() (called here): looking at its code, it reads visualViewport.height… which apparently causes a reflow.
• useModalOverlay() > usePreventScroll() which is also reading window dimensions

My page is a list of around 30 cards, each with a button that can open a modal.

If I remove the button and the modal altogether, the page becomes speedy again! 🚀

My question is whether this is something that you have identified, looked at, have recommendations for?

Thanks in advance & best regards

[snowystinger]

I'm not aware of any issues with our modals. Do you have lots of rerenders going to them or can you reproduce in a codesandbox/stackblitz? that could help us isolate what's going on.
Thank you!

[janvorwerk]

Hi @snowystinger & thanks for your answer!

I will try to build a repro… not sure how quickly I can do this.

Also, since I posted my message, the effect of removing the modal became less obvious: I tried once more to build w/ and w/o the modals and the speedup is no longer visible on the 12-years old laptop I use to test throughput :(

Finding a culprit is hard on a complex Nextjs app: the dev mode is not behaving very much like prod (+ React profiler crashes on my page), and in prod, all profiling tools become unusable.

So please hold until I can give more sensible data… or close this discussion (in which case I apologize for the noise).

[janvorwerk]

I can confirm that my analysis was wrong! Very sorry for the noise 😊