Does react-aria-components collections support virtualization?

[clmnin]

As I understand react-stately collections is responsible for virtualization. And since react-aria-components' collections are build on react-stately I assume they handle virtualization of large lists too.

[snowystinger]

Hey, so collections are not responsible for virtualization. They are just responsible for managing large sets of data and helping to navigate them. Rendering them is different. We don't have much in the way of documentation around our own virtualizer right now, but you could look at it to see what we do. Theoretically, you should be able to use other virtualizer libraries, though I'm not sure how much people have tried yet.

We haven't tried it out with the new RAC collection implementation yet either, so please let us know if you run into any issues with it.

[piecyk]

@snowystinger issue here is that the collection are tightly coupled with children in RAC so current there is no way to have collection for all items in list and render only visible elements.

Basic to suport virtualization with external libilary @tanstack/react-virtual using hooks api we need

• create collection for all items
• implement getDropTargetFromPoint
• keep rendered items for dropped or focused, dragged keys even if they are not visible

Overall it works great, just the amount of code using hooks api is bit overwhelming ( especially with drag and drop ) that's why so big fun of RAC.

Wondering how we could add suport for this in RAC and keep it flexible 🤔 Allow passing collection to RAC? Then still we would like to have state for getting keys that should be persistent, cc @devongovett any ideas?

[binaryartifex]

@snowystinger im also bumping into this virtualization issue when it comes to rendering a rich content list in the thousands the standard RAC combobox is noticeably slower. im trying to follow along with @devongovett's example here but it becomes a tangled mess of props when i try to enforce an anti corruption layer of sorts between the RAC implementation for a ComboBox that stops at the Popover and the custom listbox that starts at his ListBox implementation but RAC doesn't expose the combobox state prop so im back to square one. adding some virtualization implementation docs to complement the useTable and useListBox hooks in the next release would be greatly appreciated.

[snowystinger]

His example is made with hooks. RAC doesn't quite expose enough yet we think to do virtualization. More support is coming down the pipe though, for instance, support for accessing combobox state https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/docs/ComboBox.mdx#L1346 (will be in next release and will be in the docs then)

We'd love to have some actual examples on the docs using virtualization, however, that's a big endeavor for advanced use cases and we have been focused on other priorities. If anyone would like to contribute it, we'd be open to reviewing a PR.

[reidbarber]

Virtualizer is now documented: https://react-spectrum.adobe.com/react-aria/Virtualizer.html