Why does React Aria have its own Virtualizer? Why not use an existing library? Accessibility. If you combine a virtualizer with most component libraries, you might notice that keyboard navigation breaks. That's because scrolling the focused element out of view removes it from the DOM. Then when you press... the arrow keys, nothing happens because the list has lost focus. React Aria's Virtualizer is deeply integrated with our components, so we can automatically persist the focused item in the DOM even when it scrolls out of view.show more

We also automatically add ARIA attributes like aria-setsize and aria-posinset to items so that screen readers know where they are in the entire list, rather than only what's in the DOM. Hierarchy is also important. If you have a list with sections, keeping the headers in the DOM when items within a section are visible preserves the ability for screen readers to announce properly. We also integrate with React Aria's drag and drop, table column resizing, etc.

But, like all of React Aria Components, there's always a lower level API if you want to do something custom. Virtualizer is built on our CollectionRenderer API, which lets you customize how collection components are rendered to the DOM. So you could use this to integrate with a different virtualizer library. Just keep those accessibility features in mind! 🙂

Persisting the focused element is genius 🧠

Great work Devon + team

Does that mean ctrl+f keeps working?

I don't believe there is a way to do that without rendering all items to the DOM, which defeats the performance benefits of virtualizing. We'd need a new browser API I think.

Have you considered improving accessibility in an existing open source project? Is it really harder than making the whole library from scratch?

Actually, we've been using this implementation in production for almost 10 years now! It's been open source for almost 5, as part of React Spectrum. Really, this is just integrating it with React Aria Components and adding docs.

Does this work well with a large draggable list tree? Most of them do not work with a draggable context.

Yes drag and drop is integrated.