How to use useListBox with virtualizer (react-window/react-virtualized)

[deebov]

❔ Question

I wanted use useListbox with some kind of virtualizer. I saw the implementation of react-aria's own virtualizer with listbox. However, there're some issues:

1. It does not use semantic HTML tags (ul, li)
2. Not as performant as other virtualizers (react-window/react-virtualized) out there
3. Hard to understand what's going on without a guide

Is it possible to use listbox with react-window/react-virualizer or whether the current API allows us to do so? If yes, can you give some directions on how to achieve that?

🔦 Context

I want to create a long list (100 items min.) with sections.

[devongovett]

You probably could use another virtualizer, but we haven't tested it yet. The main thing you'd need to replicate is accessibility support. This is something we found lacking in existing solutions. For example, you need to deal with focus when items go out of view and are removed from the DOM. Also, most virtualizers I've seen only support a flat list of items rather than full heirarchical structure. The nesting is necessary e.g. for sections to represent the hierarchy to accessibility.

To reply to your points:

1. This is on purpose due to the extra wrapper elements that are added around some items for positioning. Putting a <div> inside a <ul> isn't valid. The HTML semantics aren't used anyway because we assign ARIA roles, which override them, so I don't think this is a big deal.
2. How did you measure this? We'd love to improve our virtualizer if possible.
3. True. We haven't documented it yet because there's still some active development going on and there's a lot to write. I think we should get to that relatively soon.

[deebov]

@devongovett thanks for clarifying

2. I did not do any benchmarking but the result was significantly visible. e.g. if you scroll fast you can see a blank list for 100ms-600ms whereas with other virtualizers it's almost unnoticeable

[ktabors]

We are continuing to work on performance. Please let us know how your use of a different virtualizer goes. And please take a look at the documentation when this comment is released.