Tree performance for 70K items

[imjhonny]

Provide a general summary of the issue here

Current project we need to have 70K items in a Tree and we can't use async load.

Tree takes a bit to load which is ok but handling the click event takes 549.23 ms

When I check the performance in chrome tools this events cause rerenders:

• focus: focus seems to trigger the entire state to change and is slow
• click: 479ms, TreeInner seems to be rerendering several times because of useDragAndDrop

Curent Tree has no drag and drop props. Would be great if we could avoid that extra process that makes it slow

🤔 Expected Behavior?

Fast onClick update

😯 Current Behavior

Slow update

💁 Possible Solution

onFocus: avoid rerender entire state

onClick: avoid extra process caused by useDragAndDrop hook

🔦 Context

Currently using react-components Tree
React 16

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/6rphml

Version

1.14.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Sonoma 14.6.1

🧢 Your Company/Team

Ubiquiti

🕷 Tracking Issue

No response

[reidbarber]

Does the same issue happen when the tree is virtualized?

https://react-aria.adobe.com/Virtualizer

And there shouldn't be any performance hit from DnD if it's not enabled (maybe except for a child reading from the context to see if DnD is enabled). I would be surprised if that is the issue.

[imjhonny]

@reidbarber Yes this issue is present with the virtualizer. Prop dragAndDropHooks is undefined

We have a controlled state to update the selectedKeys, but I can't seem to find what triggers the other rerenders. Are there any suggestions regarding to memo the Tree Items or Tree components?

[imjhonny]

In the Sandbox example given, a tree with 70k items takes 297.92 ms to complete the task. Not sure what could be the cause

[snowystinger]

Just to check, your issues says on react-aria-components 1.14 and it also mentions that focus causes a lot of re-renders. Have you tried 1.15? We merged fix useFocusRing perf and it was in that release. So I'd be curious if that helps.

Your issue also mentions drag and drop, but I don't see it in the codesandbox. Did you mean to include it? Also the sandbox is on 1.15.1

My last comment is that the sandbox doesn't appear to have the virtualization quite right due to display flex on the Tree, if you change that to block the scrollbar will behave correctly and scrolling to the top won't break it entirely.