RAC - Table performance very slow when rendering new collections.

[Jarrku]

Provide a general summary of the issue here

Latest react-aria-components seems to have introduced something that affects dynamic rendering of table elements.
It seems this only seems to happen in Dev mode. When running in production mode, I can't seem to trigger the problem.

🤔 Expected Behavior?

I expect the table to trigger some rerenders when changing items, but not with the slowness currently present.

😯 Current Behavior

Table rerenders very slowly when using items with new IDs

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/remix-run-remix-cmjxmb21?file=app%2Froutes%2F_index.tsx

Toggling a search column triggers a new data set.

Version

1.8.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Not sure why, but that Index component appears to be rerendering way too many times? Seems like that shouldn't be related to Table. All the state in Table would cause rerenders inside Table, not outside. Might be good to track that down first?

[Jarrku]

Adjusted the example to extract the logging inside a memo'd component with just the Table component

If you uncomment the null return, you'll see only 2 render logs. But when actually rendering the table component, the amount of renders increases dramatically.

Edit: I can look into setting up a more minimal reproduction in a basic vite app tomorrow if that's easier to work with.

[Jarrku]

After investigating this a bit more, it seems to have something to do with using setSearchParams, and reading from searchParams hook from react-router.

Updated example to showcase difference: https://stackblitz.com/edit/remix-run-remix-cmjxmb21?file=app%2Froutes%2F_index.tsx

This only started happening from 1.8.0 RAC release so I'm unsure if I should file a bug with react-router or keep it here?

[snowystinger]

Thanks for the additional information. I'm unsure as well, not being well versed in react-router. We did make changes to rendering in 1.8, though it should have all been performance boosting, so either we introduced a weird regression or yeah, the issue is in react-router. Can't hurt to open an issue against them, though I'd try to remove our library from the example if you did that.

[Jarrku]

As far as I can tell, this is only happening with the table component within our 2 apps that use react router + RAC.
Haven't seen any slowdown elsewhere at this time.

So unsure how to make a reproduction without RAC to react-router, but I'll run some performance tests to try and trigger it elsewhere.

[uncvrd]

@Jarrku I think you're on to something.... I'm running into something similar but with RAC and NextJS. I have a Table that updates the items property of the Table with filtered results based on a search-as-you-type and I'm seeing some large performance issues even with just 30-ish rows

@snowystinger It may not feel like much in this very stripped down code sandbox but check out the performance flame chart for something as simple as this.

https://codesandbox.io/p/devbox/modern-wood-ywh7l6?workspaceId=ws_VeyR4ykdaWme1iMQigmAsK

The re-renders are really quite prominent after typing or removing the first letter in the search (I've been using a capital "P" to filter for words that start with "Predicted") even if the performance is not noticeable in the code sandbox but really start to fester in larger settings.

I get a recursive flame chart many hundreds deep of

commitLayoutEffectOnFiber -> recursivelyTraverseLayoutEffects

Here is a screenshot of me on a keydown event for removing the letter "P"

My gut just feels like this is an excessive amount of javascript execution for filtering a table

And here is the JSON trace dump if you want to throw it in to dev tools too (I couldn't upload directly): https://drive.google.com/file/d/1Vhb7DNS_XSKzqmA1ywSivSWAV1Mm4MTa/view?usp=sharing

Just for reference here is a screenshot of the equivalent action (which led me to this issue) on my dev site where just typing a letter in to the input caused an almost 700ms interaction delay because of all the js activity :' )

Let me know if I can help provide anything else!

[uncvrd]

just realized that the codesandboxes ive been sharing on tickets were all private so just wanted to share that the one in my message above should be public now...sorry

https://codesandbox.io/p/devbox/modern-wood-ywh7l6

[LFDanLu]

No worries! Just as an update, we've done some digging and it seems to be an issue with our update to support Suspense and how React is handling Transitions updates. For instance, if you wrap the state setter in the original example in a startTransition you get the same degraded performance: https://stackblitz.com/edit/remix-run-remix-mexdlxid?file=app%2Froutes%2F_index.tsx. Still digging to see what we can do to handle this

@uncvrd I'm unable to get that codesandbox to run, getting a 502 in the preview...

[uncvrd]

@LFDanLu glad you were able to at least pin point the problem! Re Codesandbox: so yea i ran in to that too, thought it was just me when I set the sandbox to public today. Click a key to close the errored terminal and then run pnpm dev should start the server again. Dunno why that's happening though, it's the sandbox template that NextJS has within their issue template lol.

Hopefully that works? Let me know!