Slow table performance

[Cyral]

Provide a general summary of the issue here

Tables from react-aria-components are slow to render and make the application UI feel laggy when an action triggers a re-render (e.g. sorting or filtering the table, changing rows, etc.)

🤔 Expected Behavior?

React Aria tables should not be significantly slower than a native table.

😯 Current Behavior

Table re-renders very slowly

💁 Possible Solution

No response

🔦 Context

I have some tables in my application displaying up to 500 rows, usually much less, but still up to that amount occasionally. HTML table elements can handle this fine, and virtualization isn't something to worry about yet. (Especially because these tables extend the page, e.g. are not constrained by a scrollable container that would allow for virtualization).

The application has various buttons that trigger re-renders of the table. For example, users can click a column to toggle the sort direction, use a react-aria menu to filter rows by value, and change the customer or date that is being displayed. When clicking on any of these actions, there is a noticeable delay when using React Aria's Table element (upwards of a second), which makes the UI feel laggy. When using a regular table element, the action takes effect immediately and feels snappy as expected.

🖥️ Steps to Reproduce

CodeSandbox: https://codesandbox.io/p/devbox/react-aria-table-performance-q5mrvq

With this sandbox you can toggle showing a native and react-aria table. Show the native table, and notice how clicking the generate button feels snappy. Then, click the toggle button to show the react-aria table, and you will feel a delay when replacing the rows with new rows (to simulate a filter or sort operation).

I also added a button to try the same experiment with a native list element and react-aria's GridList. You can see GridList is a bit slower, but not noticeable like it is with tables. This was to help determine if react-aria's internal collection elements/logic are to blame, or if it's more table related.

Performance Results - Dev
In dev mode, I am seeing:

• 20ms for native table rendering
• 200ms for react-aria table rendering (this is a ~12 frame delay which is very noticeable)

Performance Results - Prod Build
When compiling the react app and running it, I get:

• 15ms for native table rendering
• 110ms for react-aria table rendering

This is with 500 rows, a more extreme case, but you will see a few frame delay even with something like 50 rows. Also try clicking the headers to sort the columns, I think this "feels" more realistic and you can feel how the lag affects the perceived performance

This related issue suggests performance is better (if not resolved) in production builds. In the sandbox, open the terminal and run pnpm run build && pnpm run preview to open a production build. Performance is improved, but still notably laggy.

Version

1.11.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This feels related to #3965 which is related to providing a virtualized experience constrained by the page rather than by the table itself. I see that you mention that virtualization isn't something you were considering needing yet, but I think providing the above virtualized experience will be preferable. There are certainly areas in our Table that we can (and have) look to improve performance in, some of which maybe possible with some of our current work in RAC collections so stay tuned!

[Cyral]

Fixed the codesandbox, for whatever reason it reverted back to an old version without the sorting and toggle. See: https://codesandbox.io/p/devbox/react-aria-table-performance-q5mrvq (First time using this so not sure what is up with that) I believe you can also try just the demo at: https://q5mrvq-5173.csb.app/

Unfortunately virtualization won't be an option here. Most of the time I am dealing with < 100 item tables but even those feel laggy compared to a native table. With ~100 items a compact table can fit on screen so artificially constraining it to provide virtualization wouldn't work great for my use case.

[stefanprobst]

for me, filtering this example table with 50 rows also feels a bit laggy: https://rac-table-perf.vercel.app/ (repo: https://github.com/stefanprobst/rac-table-perf)

[devongovett]

@stefanprobst any specific browser or something? For me it's fast, never went under 60fps.

[stefanprobst]

this is with firefox on linux. with "ap" in the searchfield, hitting Backspace twice lags with 17-25 fps for me.

EDIT: should have added that this is on a "Intel(R) Core(TM) i5-6400T CPU @ 2.20GHz" which is a couple of years old now (but it's my actual work pc)
EDIT2: also tried on my android phone (samsung galaxy a40), where typing into the searchfield is very laggy

[Cyral]

@stefanprobst Your example feels fine for me but I also suspect all of these examples really depend on the machine. I had to crank mine up to 500 rows on an M3 mac to illustrate the problem well, but I'd expect the average laptop to perform much worse. I just tried it on a new Surface Pro as well and it sees around 400-500ms delay on sorting the columns in my example. No lag with a regular table.

Very happy with the infinite scrolling released today, which is another reason I want to use react-aria instead of regular tables so bad!

[LFDanLu]

Talked to the team briefly, and we'll want to look into seeing what we can do to improve performance here as well as push on window scrolling virtualization as mention. Will need to profile the performance to see what might be cause this, and maybe see if the React compiler might be able to help here