Ripple: Performance Degradation in Chrome 135 and Edge 135

[palkema]

I have several applications that are experiencing significant performance degradation in both chrome 135 and edge version 135.

As you can see in the screenshot below, it seems that the majority of the performance issues are related to the recalculate styles event, specially the getHeight() function.

I have seen this on three applications now, all which use prime react. It seems to impact datatables, and dropdowns specifically, but may impact other components as well.

System Information

primereact: 10.1.1
react: 18.2.0

Steps to reproduce the behavior

1. Upgrade edge or chrome to version starting in 135, we observe performance slowness on rerenders, especially with datatables and drop downs.
2. Downgrade back to chrome or edge 134, and these issues go away.

Expected behavior

My expectation would be no performance degredation between edge and chrome version updates.

[palkema]

Just wanted to add more screenshots. This is a screenshot from a different application than was was sent previously that also uses prime react.

If you look at the full stack, it seems to be calling getDimensions, which calls getHeight.

[melloware]

Excellent debugging. Sounds like something with Chrome changed making this call more expensive.

[melloware]

@palkema can you provide a simple StackBlitz reproducer showing the issue?

[melloware]

@acc-cassio have you seen this he mentions its with DataTable pre your updates in 10.9.5?

[acc-cassio]

@melloware Yeah, in the screenshot you can see version 10.9.4 of primereact, even if in the post it is stated 10.1.1. In any case, it precedes the updates of 10.9.5 indeed, or what do you mean?

I cannot reproduce the problem on my end, I am using Chrome Version 135.0.7049.96 (Official Build) (x86_64) and using a Datatable with a lot of data. Also, I could not find any use of the getHeight and getDimensions functions in the primereact library.

[melloware]

I also could not reproduce in Chrome 135. Thanks for checking @acc-cassio . @

[github-actions[bot]]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[palkema]

We were able to resolve this by updating our config.ts and disabling ripple for chrome / edge versions greater than 134.

PrimeReact.ripple = Number(window.clientInformation.userAgent.split('Chrome/')[1].split('.')[0]) <= 134;

Doing this resolved our issue.

[melloware]

wow so the Ripple is causing the performance issues?

[palkema]

Yes. For us, it was 100% Ripple. When we disabled this, all of our performance issues went away. This impacted both Edge 135+ and Chrome 135+ and most apps we tested were impacted in some way.

Some apps were minimally impacted, while others were essentially unusable depending on the components that were used.

[melloware]

Awesome I updated the title to say "Ripple" so we can see exactly what is causing this bug.

[melloware]

Yep it looks like Ripple definitely does dimension calculation...