Improve ListBox performance by memoizing dependencies that otherwise change every render while the hover/selection state changes.

Author: widavies

packages/@react-stately/list/src/useListState.ts

@@ -63,25 +63,25 @@ export function useListState<T extends object>(props: ListProps<T>): ListState<T
 
   useFocusedKeyReset(collection, selectionManager);
 
-  return {
+  return useMemo(() => ({
     collection,
     disabledKeys,
     selectionManager
-  };
+  }), [collection, disabledKeys, selectionManager]);
 }
 
 /**
  * Filters a collection using the provided filter function and returns a new ListState.
  */
 export function UNSTABLE_useFilteredListState<T extends object>(state: ListState<T>, filter: ((nodeValue: string) => boolean) | null | undefined): ListState<T> {
   let collection = useMemo(() => filter ? state.collection.UNSTABLE_filter!(filter) : state.collection, [state.collection, filter]);
-  let selectionManager = state.selectionManager.withCollection(collection);
+  let selectionManager = useMemo(() => state.selectionManager.withCollection(collection), [collection]);
   useFocusedKeyReset(collection, selectionManager);
-  return {
+  return useMemo(() => ({
     collection,
     selectionManager,
     disabledKeys: state.disabledKeys
-  };
+  }), [collection, selectionManager, state.disabledKeys]);
 }
 
 function useFocusedKeyReset<T>(collection: Collection<Node<T>>, selectionManager: SelectionManager) {

packages/react-aria-components/src/ListBox.tsx

@@ -249,7 +249,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
           values={[
             [ListBoxContext, props],
             [ListStateContext, state],
-            [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
+            [DragAndDropContext, useMemo(() => ({dragAndDropHooks, dragState, dropState}), [dragAndDropHooks, dragState, dropState])],
             [SeparatorContext, {elementType: 'div'}],
             [DropIndicatorContext, {render: ListBoxDropIndicatorWrapper}],
             [SectionContext, {name: 'ListBoxSection', render: ListBoxSectionInner}]