list virtualisation

[madhums]

We are using rct to render a long list of category hierarchy. It contains more than 1800 items. And it does get quite slow.

Using a list virtualisation library like react-virtualized or react-window would be a great fit. I'd be curious to hear your thoughts and if you would be open to receiving a PR if I worked on it.

[lukasbach]

Hi @madhums! Yes, I actually did think about virtualization in this library before and did work in the past on some architectural changes to the library with virtualization in the future in mind. However, this would mean a lot of changes in many parts of the library and certainly be more than a small addition. Some of the topics or questions that would need to be fixed or clarified while tackling this:

Restructure the render logic to render a linear list rather than a hierarchical list

Virtualization requires the rendered list to be a linear list of dom nodes that can be placed independently of the dom structure, which is different to how rct currently works (it renders a hierarchical dom structure to stay compliant with accessibility specs). This could probably be kept compliant by providing alternative aria tags (aria-level, aria-setsize, aria-posinset). This is where I did spend some effort in the past already, since rct already keeps a linear representation of the list items in memory, but the way how the list is rendered from that would still be adapted. If you use slack, you can inspect their tree view on the left, since that also seems to be a virtualized tree that supplies the necessary aria tags.

Keep the core package clean

The core package already is a bit bigger than I would like it to be, adding a list virtualization library as well as the changes to the library needed to support virtualization would blow it up even more. If we add virtualization to this library, I would like it to be an additional package maintained as part of this monorepo, but available as seperate package to be installed. We could maybe allow to customize how the top level of list items is rendered with a custom render prop, and there the user could add a virtualized list renderer provided by the virtualization package. If the virtualization part of rct is part of a seperate package, I also wouldn't mind pulling in a third-party library for virtualization such as react-window.

If you or someone else wants to have a try at it, feel free to do so, please keep the points in mind I mentioned.