RAC Table re-render performance issues in local development (NextJS & Vite)

[uncvrd]

Provide a general summary of the issue here

Hi there, this is in continuance to a discussion that happened here #8094 (comment)

Essentially, I have a table of 30 rows, when I type to filter the table, there is a noticeable delay in rendering as the filtered rows are added/removed from the DOM. Surprisingly this only occurs in local development. When a production build is tested, this performance issue does not occur. I confirmed that this is not just specific to NextJS as I have reproduced this in Vite as well.

While it's great it doesn't occur in a production build, it did cause me to spend a few days debugging the performance issues for something that would be a non-issue in production. So I figured it would be worth investigating a little bit so others dont run in to it either?

Below is context of some discoveries I had made (there is additional context in the ticket i linked above by the way), along with two reproduction repos, and chrome dev tools performance dumps.

Let me know if there's anything else I can help provide!

Thanks

🤔 Expected Behavior?

I expect to not have performance issues rendering a table of 30 rows in development

😯 Current Behavior

There is a large performance hitch in the React DOM while re-rendering content in a table

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

I was able to confirm that this is indeed an issue with NextJS in DEV MODE. Creating a production build and running the same exact test outputs significant performance improvements: 600ms delay -> 60ms...insane

My test case is

1. typing in a capital "P"
2. Starting the Trace recording
3. Clicking backspace to remove the character from the input
4. Stopping the trace recording

Reproduction: https://github.com/uncvrd/rac-collection-bug

In Dev mode

In prod

I've uploaded the dev/prod Chrome traces to this Drive folder: https://drive.google.com/drive/folders/1YeJdvpTuHq-YAafXu6i2P5L1Cq3tlC6H?usp=sharing

It's not just NextJS, I was able to recreate the same issue on Vite

Reproduction: https://github.com/uncvrd/rac-collection-bug-vite

Vite performance output

This outputs about 500-600ms of a delay on Vite & NextJS in dev mode

Version

1.8

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Would you be willing to try with our "nightly" version to see if it's been fixed already?

[uncvrd]

@snowystinger certainly - I have updated both repos (deployed to remote now too if you'd like to check) to the nightly build. I can confirm that I still see the performance issues

For convenience

NextJS repro: https://github.com/uncvrd/rac-collection-bug

Vite repro: https://github.com/uncvrd/rac-collection-bug-vite

I updated RAC and react-aria to the nightly's

[gijsroge]

Not sure if helpful, but this shows the issue using react-scan

I'm using React Router 7 with RAC 1.8.0

rac-table-render-issue.mp4

[snowystinger]

Thanks @gijsroge , we've done a bunch of work to reduce renders since 1.8 came out, so relevant tests should be carried out against the nightly release as well so we know if it's already been solved.
Thank you again!

[gijsroge]

@snowystinger i can confirm that this is so much better on 1.9.0 👍

[uncvrd]

I just updated to nightly 3.0.0-nightly-77b3442e4-250521 (post 1.9.0) and I still see the performance issues unfortunately

I'm glad you see improvements though! And thank you team for focusing on that in 1.9.0 🙏

Just updating the nextjs implementation going forward...

https://github.com/uncvrd/rac-collection-bug

[reidbarber]

Thanks for all the detailed info. Tried this out locally and I'm seeing similar results:

• Development build: 141ms
• Production build: 7.9ms

Disabling strict mode also didn't affect the results in the development build. Everything slower in the profiler seems React dev related, so I'm not sure of anything we could try on our end.

[gijsroge]

@uncvrd I tested your reproduction with 1.8 and 1.9 just to confirm. Like @reidbarber said this is just normal React stuff. You can also notice the difference if you disable the React devtools, it becomes much snappier. So wouldn't worry about it too much.

[uncvrd]

Thanks for checking it as well, I agree. I guess there isn't much that can be done on the RAC end. It is unfortunate that we have to accept this as a normal react behavior. To the Adobe team, should I go ahead and close this or would there be any interest in keeping it open?

[uncvrd]

also wow you're right disabling react dev tools makes a huge difference

[snowystinger]

Lets close it for now. If we need it again, we can create a new issue specific to those circumstances or we can reopen this one with more information. Since there is nothing to do right now though, I don't think it makes sense to leave open.
Thanks everyone for checking on this and providing all the extra information.