Improve Listbox component performance (#3688)

This PR improves the performance of the `Listbox` component.

Before this PR, the `Listbox` component is built in a way where all the
state lives in the `Listbox` itself. If state changes, everything
re-renders and re-computes the necessary derived state.

However, if you have a 1000 options, then every time the active option
changes, all 1000 options have to re-render.

To solve this, we can move the state outside of the `Listbox` component,
and "subscribe" to state changes using the `useSlice` hook introduced in
#3684.

This will allow us to subscribe to a slice of the state, and only
re-render if the computed slice actually changes.

If the active option changes, only 3 things will happen:

1. The `ListboxOptions` will re-render and have an updated
`aria-activedescendant`
2. The `ListboxOption` that _was_ active, will re-render and the
`data-focus` attribute wil be removed.
3. The `ListboxOption` that is now active, will re-render and the
`data-focus` attribute wil be added.

Another improvement is that in order to make sure that your arrow keys
go to the correct option, we need to sort the DOM nodes and make sure
that we go to the correct option when using arrow up and down. This
sorting was happening every time a new `ListboxOption` was registered.

Luckily, once an array is sorted, you don't have to do a lot, but you
still have to loop over `n` options which is not ideal.

This PR will now delay the sorting until all `ListboxOption`s are
registered.

On that note, we also batch the `RegisterOption` so we can perform a
single update instead of `n` updates. We use a microTask for the
batching (so if you only are registering a single option, you don't have
to wait compared to a `setTimeout` or a `requestAnimationFrame`).

## Test plan

1. All tests still pass
2. Tested this in the browser with a 2000 options. In the videos below
the only thing I'm doing is holding down the `ArrowDown` key.

Before:


https://github.com/user-attachments/assets/a2850c84-57f6-428a-aa51-e6f83d2aee97

After:


https://github.com/user-attachments/assets/157c6e99-5da8-4d72-87c6-a5e34f122531

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Improve `Menu` component performance ([#3685](https://github.com/tailwindlabs/headlessui/pull/3685))
+- Improve `Listbox` component performance ([#3688](https://github.com/tailwindlabs/headlessui/pull/3688))
 
 ## [2.2.1] - 2025-04-04
 

packages/@headlessui-react/src/components/listbox/listbox-machine-glue.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext, useMemo } from 'react'
+import { ListboxMachine } from './listbox-machine'
+
+export const ListboxContext = createContext<ListboxMachine<unknown> | null>(null)
+export function useListboxMachineContext<T>(component: string) {
+  let context = useContext(ListboxContext)
+  if (context === null) {
+    let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`)
+    if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxMachine)
+    throw err
+  }
+  return context as ListboxMachine<T>
+}
+
+export function useListboxMachine({ __demoMode = false } = {}) {
+  return useMemo(() => ListboxMachine.new({ __demoMode }), [])
+}