fix: Improve ListBox perf caused by excessive re-rendering

[widavies]

I use a Select (ListBox) to display a list of countries in an address component for my project. There are about ~200 countries, few enough that virtualization isn't necessary. However, there is a noticeable delay when hovering the mouse over countries or changing the selected country using the keyboard.

This delay stems from the ListBox re-rendering every ListBoxItem whenever the hovered item changes:

94490600-503618712-Recording_2025-03-29_192152.mp4

In the lower right corner, you can see the FPS drop sharply.

I tracked down the source to several un-memoized objects that get re-created every render. As React diffs props by reference, this causes a full render on all ListBoxItems. I added useMemo(..)s were appropriate, and now the performance is much smoother - only two re-renders occur (the newly and previously hovered items):

295701505-74604607-Recording_2025-03-29_192319.mp4

✅ Pull Request Checklist:

• [] Included link to corresponding React Spectrum GitHub Issue.
  • I did not create an issue for this PR, but I can if you'd like.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

I used the React Aria Components > Select Many story without any modifications to demonstrate the issue/fix:

I used the React Scan extension to identify the un-memoized objects - I had to force the Popover within the Select Many example open with isOpen={true} so I could select it with React Scan.

🧢 Your Project:

RSP

[widavies]

I think I got this working! I figured out a way to avoid any changes to react-aria. Instead, this hinges on ListStateContext - a context change is required for ListBoxItem to re-render, but changing ListState causes a full re-render (because useOption takes it as an argument). Instead, I added a separate argument to ListStateContext for the focusedKey - by altering this, I can change the context and properly memoize the ListBoxItemInner component to only re-render ListBoxItems that were actually hovered/unhovered.

I suspect there may be some other components we need to do this for, but this is a decent start.

Thanks for taking a look.