Components (Dropdown, Dialog, etc) are too slow due to Passive effects.

[hywook4]

Hi

When the page size is big (many DOMs), components such as Dropdown/Dialog becomes very slow.

I've used React profiler to dive deep into this issue and found that it's due to long Passive effects.

Below is the screenshot of the profiler result

I've found that in the case of the Dropdown component, the issue was fixed when I gave modal={false} props.

Also seems like the "Presence" component is the main cause for the passive effects.

Thank you,

[hywook4]

This is just a guess, but
Presence key=".0" seems like the one causing the problem while I have no idea where it came from.

[recurrence]

Does anyone have a patch for this? Radix SCREAMS in comparison with modal false but it has other unintended consequences.

[hariangr]

Anyone have any lead on this?

[tangye1234]

This issue basically is the biggest flaw in this project at present, and no one has come forward to resolve it yet.

• [Violation] Forced reflow while executing JavaScript took <N>ms #1634
• Select component blocking/slowing renders #2602
• Is it possible to reduce styles recalculation time? #2320
• Slow performance of dialog compare to headless-ui #2218

[taoliujun]

When modal is enabled, popover calls the react-remove-scroll component, which iterates through every element in the page, and when there are enough elements, there are performance issues.

But I don't know how to solve it.

[benoitgrelard]

Let's concentrate on a single issue rather than have lots of duplicates for the same thing: #1634

[ibanlopez]

Let's concentrate on a single issue rather than have lots of duplicates for the same thing: #1634

How is the concentration going?