Fix more unstable references with useMemo

widavies · widavies · commit 3c852b5678a1 · 2025-03-30T05:03:58.000Z
diff --git a/packages/@react-aria/interactions/src/useHover.ts b/packages/@react-aria/interactions/src/useHover.ts
@@ -213,8 +213,8 @@ export function useHover(props: HoverProps): HoverResult {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDisabled]);
 
-  return {
+  return useMemo(() => ({
     hoverProps,
     isHovered
-  };
+  }), [hoverProps, isHovered]);
 }
diff --git a/packages/@react-aria/listbox/src/useOption.ts b/packages/@react-aria/listbox/src/useOption.ts
@@ -17,6 +17,7 @@ import {getItemId, listData} from './utils';
 import {isFocusVisible, useHover} from '@react-aria/interactions';
 import {ListState} from '@react-stately/list';
 import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
+import {useCallback} from 'react';
 
 export interface OptionAria extends SelectableItemStates {
   /** Props for the option element. */
@@ -142,12 +143,12 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
 
   let {hoverProps} = useHover({
     isDisabled: isDisabled || !shouldFocusOnHover,
-    onHoverStart() {
+    onHoverStart: useCallback(() => {
       if (!isFocusVisible()) {
         state.selectionManager.setFocused(true);
         state.selectionManager.setFocusedKey(key);
       }
-    }
+    }, [state.selectionManager])
   });
 
   let domProps = filterDOMProps(item?.props);
diff --git a/packages/@react-aria/selection/src/useSelectableItem.ts b/packages/@react-aria/selection/src/useSelectableItem.ts
@@ -16,7 +16,7 @@ import {getCollectionId, isNonContiguousSelectionModifier} from './utils';
 import {isCtrlKeyPressed, mergeProps, openLink, useId, useRouter} from '@react-aria/utils';
 import {moveVirtualFocus} from '@react-aria/focus';
 import {MultipleSelectionManager} from '@react-stately/selection';
-import {useEffect, useRef} from 'react';
+import {useEffect, useRef, useCallback} from 'react';
 
 export interface SelectableItemOptions extends DOMProps {
   /**
@@ -184,14 +184,17 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver
   // on iOS 14 doesn't try to move real DOM focus to the item anyway.
   let itemProps: SelectableItemAria['itemProps'] = {};
+
+  const onFocus = useCallback(e => {
+    if (e.target === ref.current) {
+      manager.setFocusedKey(key);
+    }
+  }, [manager]);
+
   if (!shouldUseVirtualFocus && !isDisabled) {
     itemProps = {
       tabIndex: key === manager.focusedKey ? 0 : -1,
-      onFocus(e) {
-        if (e.target === ref.current) {
-          manager.setFocusedKey(key);
-        }
-      }
+      onFocus
     };
   } else if (isDisabled) {
     itemProps.onMouseDown = (e) => {
@@ -365,11 +368,11 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // Once the user is in selection mode, they can long press again to drag.
   // Use a capturing listener to ensure this runs before useDrag, regardless of
   // the order the props get merged.
-  let onDragStartCapture = e => {
+  let onDragStartCapture = useCallback(e => {
     if (modality.current === 'touch' && longPressEnabledOnPressStart.current) {
       e.preventDefault();
     }
-  };
+  }, []);
 
   // Prevent default on link clicks so that we control exactly
   // when they open (to match selection behavior).
diff --git a/packages/@react-aria/utils/src/useGlobalListeners.ts b/packages/@react-aria/utils/src/useGlobalListeners.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {useCallback, useEffect, useRef} from 'react';
+import {useCallback, useEffect, useRef, useMemo} from 'react';
 
 interface GlobalListeners {
   addGlobalListener<K extends keyof WindowEventMap>(el: Window, type: K, listener: (this: Document, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void,
@@ -48,5 +48,5 @@ export function useGlobalListeners(): GlobalListeners {
     return removeAllGlobalListeners;
   }, [removeAllGlobalListeners]);
 
-  return {addGlobalListener, removeGlobalListener, removeAllGlobalListeners};
+  return useMemo(() => ({addGlobalListener, removeGlobalListener, removeAllGlobalListeners}), [addGlobalListener, removeGlobalListener, removeAllGlobalListeners]);
 }
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -66,7 +66,7 @@ export function useFormValidationState<T>(props: FormValidationProps<T>): FormVa
   // Private prop for parent components to pass state to children.
   if (props[privateValidationStateProp]) {
     let {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState;
-    return {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation};
+    return useMemo(() => ({realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation}), [realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation]);
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -152,7 +152,7 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
     ? controlledError || serverError || currentValidity
     : controlledError || serverError || clientError || builtinValidation || currentValidity;
 
-  return {
+  return useMemo(() => ({
     realtimeValidation,
     displayValidation,
     updateValidation(value) {
@@ -188,7 +188,7 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
       }
       setServerErrorCleared(true);
     }
-  };
+  }), [realtimeValidation, displayValidation, validationBehavior, currentValidity]);
 }
 
 function asArray<T>(v: T | T[]): T[] {
diff --git a/packages/@react-stately/list/src/useListState.ts b/packages/@react-stately/list/src/useListState.ts
@@ -35,6 +35,9 @@ export interface ListState<T> {
   /** A set of items that are disabled. */
   disabledKeys: Set<Key>,
 
+  /** The focused key */
+  focusedKey: Key | null,
+
   /** A selection manager to read and update multiple selection state. */
   selectionManager: SelectionManager
 }
@@ -66,22 +69,24 @@ export function useListState<T extends object>(props: ListProps<T>): ListState<T
   return useMemo(() => ({
     collection,
     disabledKeys,
+    focusedKey: selectionState.focusedKey,
     selectionManager
-  }), [collection, disabledKeys, selectionManager]);
+  }), [collection, disabledKeys, selectionState.focusedKey, 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 = useMemo(() => state.selectionManager.withCollection(collection), [collection]);
+  let selectionManager = useMemo(() => state.selectionManager.withCollection(collection), [state, collection]);
   useFocusedKeyReset(collection, selectionManager);
   return useMemo(() => ({
     collection,
     selectionManager,
+    focusedKey: selectionManager.focusedKey,
     disabledKeys: state.disabledKeys
-  }), [collection, selectionManager, state.disabledKeys]);
+  }), [collection, selectionManager, selectionManager.focusedKey, state.disabledKeys]);
 }
 
 function useFocusedKeyReset<T>(collection: Collection<Node<T>>, selectionManager: SelectionManager) {
diff --git a/packages/@react-stately/list/src/useSingleSelectListState.ts b/packages/@react-stately/list/src/useSingleSelectListState.ts
@@ -13,7 +13,7 @@
 import {CollectionStateBase, Key, Node, Selection, SingleSelection} from '@react-types/shared';
 import {ListState, useListState} from './useListState';
 import {useControlledState} from '@react-stately/utils';
-import {useMemo} from 'react';
+import {useMemo, useCallback} from 'react';
 
 export interface SingleSelectListProps<T> extends CollectionStateBase<T>, Omit<SingleSelection, 'disallowEmptySelection'> {
   /** Filter function to generate a filtered list of nodes. */
@@ -46,7 +46,7 @@ export function useSingleSelectListState<T extends object>(props: SingleSelectLi
     disallowEmptySelection: true,
     allowDuplicateSelectionEvents: true,
     selectedKeys,
-    onSelectionChange: (keys: Selection) => {
+    onSelectionChange: useCallback((keys: Selection) => {
       // impossible, but TS doesn't know that
       if (keys === 'all') {
         return;
@@ -60,19 +60,20 @@ export function useSingleSelectListState<T extends object>(props: SingleSelectLi
       }
 
       setSelectedKey(key);
-    }
+    }, [props.onSelectionChange, selectedKey, setSelectedKey])
   });
 
   let selectedItem = selectedKey != null
     ? collection.getItem(selectedKey)
     : null;
 
-  return {
+  return useMemo(() => ({
     collection,
     disabledKeys,
     selectionManager,
+    focusedKey: selectionManager.focusedKey,
     selectedKey,
     setSelectedKey,
     selectedItem
-  };
+  }), [collection, disabledKeys, selectionManager, selectedKey, setSelectedKey, selectedItem]);
 }
diff --git a/packages/@react-stately/overlays/src/useOverlayTriggerState.ts b/packages/@react-stately/overlays/src/useOverlayTriggerState.ts
@@ -11,7 +11,7 @@
  */
 
 import {OverlayTriggerProps} from '@react-types/overlays';
-import {useCallback} from 'react';
+import {useCallback, useMemo} from 'react';
 import {useControlledState} from '@react-stately/utils';
 
 export interface OverlayTriggerState {
@@ -46,11 +46,11 @@ export function useOverlayTriggerState(props: OverlayTriggerProps): OverlayTrigg
     setOpen(!isOpen);
   }, [setOpen, isOpen]);
 
-  return {
+  return useMemo(() => ({
     isOpen,
     setOpen,
     open,
     close,
     toggle
-  };
+  }), [isOpen, setOpen, open, close, toggle]);
 }
diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts
@@ -15,7 +15,7 @@ import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {SelectProps} from '@react-types/select';
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
-import {useState} from 'react';
+import {useState, useMemo, useEffect, useCallback, useRef} from 'react';
 
 export interface SelectStateOptions<T> extends Omit<SelectProps<T>, 'children'>, CollectionStateBase<T> {}
 
@@ -44,26 +44,34 @@ export interface SelectState<T> extends SingleSelectListState<T>, OverlayTrigger
 export function useSelectState<T extends object>(props: SelectStateOptions<T>): SelectState<T>  {
   let triggerState = useOverlayTriggerState(props);
   let [focusStrategy, setFocusStrategy] = useState<FocusStrategy | null>(null);
+
+  let validationStateRef = useRef<FormValidationState>(null);
+
   let listState = useSingleSelectListState({
     ...props,
-    onSelectionChange: (key) => {
+    onSelectionChange: useCallback(key => {
       if (props.onSelectionChange != null) {
         props.onSelectionChange(key);
       }
 
       triggerState.close();
-      validationState.commitValidation();
-    }
+      validationStateRef.current!.commitValidation();
+    }, [props.onSelectionChange, triggerState])
   });
 
   let validationState = useFormValidationState({
     ...props,
     value: listState.selectedKey
   });
+  validationStateRef.current = validationState;
 
   let [isFocused, setFocused] = useState(false);
 
-  return {
+  useEffect(() => {
+    console.log("come on");
+  }, [triggerState])
+
+  return useMemo(() => ({
     ...validationState,
     ...listState,
     ...triggerState,
@@ -83,5 +91,5 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
     },
     isFocused,
     setFocused
-  };
+  }), [validationState, listState, triggerState, focusStrategy, isFocused]);
 }
diff --git a/packages/@react-stately/selection/src/useMultipleSelectionState.ts b/packages/@react-stately/selection/src/useMultipleSelectionState.ts
@@ -85,7 +85,7 @@ export function useMultipleSelectionState(props: MultipleSelectionStateProps): M
     }
   }, [selectionBehaviorProp]);
 
-  return {
+  return useMemo(() => ({
     selectionMode,
     disallowEmptySelection,
     selectionBehavior,
@@ -116,7 +116,7 @@ export function useMultipleSelectionState(props: MultipleSelectionStateProps): M
     },
     disabledKeys: disabledKeysProp,
     disabledBehavior
-  };
+  }), [selectionMode, disallowEmptySelection, selectionBehavior, selectedKeys, setSelectedKeys, allowDuplicateSelectionEvents, disabledKeysProp, disabledBehavior]);
 }
 
 function convertSelection(selection: 'all' | Iterable<Key> | null | undefined, defaultValue?: Selection): 'all' | Set<Key> | undefined {
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
+import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption, OptionAria} from 'react-aria';
 import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
@@ -20,10 +20,11 @@ import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Ori
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {HeaderContext} from './Header';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, memo, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SeparatorContext} from './Separator';
 import {TextContext} from './Text';
 import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
+import {SelectionManager} from '@react-stately/selection';
 
 export interface ListBoxRenderProps {
   /**
@@ -332,13 +333,23 @@ export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRen
 export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
   let ref = useObjectRef<any>(forwardedRef);
   let state = useContext(ListStateContext)!;
-  let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
-  let {optionProps, labelProps, descriptionProps, ...states} = useOption(
+
+  let options = useOption(
     {key: item.key, 'aria-label': props?.['aria-label']},
     state,
     ref
   );
 
+  return <ListBoxItemInner selectionManager={state.selectionManager} options={options} focused={item.key === state.focusedKey} passRef={ref} props={props} item={item} />
+});
+
+const ListBoxItemInner = memo(function ListBoxItemInner<T extends object>({props, item, selectionManager, options, focused, passRef}: 
+  {options: OptionAria, props: ListBoxItemProps<T>, focused: boolean, selectionManager: SelectionManager, item: Node<T>, passRef: React.MutableRefObject<any>}) {
+  const ref = passRef;
+
+  let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
+  let {optionProps, labelProps, descriptionProps, ...states} = options;
+
   let {hoverProps, isHovered} = useHover({
     isDisabled: !states.allowsSelection && !states.hasAction,
     onHoverStart: item.props.onHoverStart,
@@ -367,8 +378,8 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
     values: {
       ...states,
       isHovered,
-      selectionMode: state.selectionManager.selectionMode,
-      selectionBehavior: state.selectionManager.selectionBehavior,
+      selectionMode: selectionManager.selectionMode,
+      selectionBehavior: selectionManager.selectionBehavior,
       allowsDragging: !!dragState,
       isDragging,
       isDropTarget: droppableItem?.isDropTarget
@@ -397,7 +408,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
       data-pressed={states.isPressed || undefined}
       data-dragging={isDragging || undefined}
       data-drop-target={droppableItem?.isDropTarget || undefined}
-      data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>
+      data-selection-mode={selectionManager.selectionMode === 'none' ? undefined : selectionManager.selectionMode}>
       <Provider
         values={[
           [TextContext, {

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ export function useFormValidationState<T>(props: FormValidationProps<T>): FormVa`
`66`	`66`	`// Private prop for parent components to pass state to children.`
`67`	`67`	`if (props[privateValidationStateProp]) {`
`68`	`68`	`let {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation} = props[privateValidationStateProp] as FormValidationState;`
`69`		`- return {realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation};`
	`69`	`+ return useMemo(() => ({realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation}), [realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation]);`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`// eslint-disable-next-line react-hooks/rules-of-hooks`
`@@ -152,7 +152,7 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid`
`152`	`152`	`? controlledError \|\| serverError \|\| currentValidity`
`153`	`153`	`: controlledError \|\| serverError \|\| clientError \|\| builtinValidation \|\| currentValidity;`
`154`	`154`
`155`		`- return {`
	`155`	`+ return useMemo(() => ({`
`156`	`156`	`realtimeValidation,`
`157`	`157`	`displayValidation,`
`158`	`158`	`updateValidation(value) {`
`@@ -188,7 +188,7 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid`
`188`	`188`	`}`
`189`	`189`	`setServerErrorCleared(true);`
`190`	`190`	`}`
`191`		`- };`
	`191`	`+ }), [realtimeValidation, displayValidation, validationBehavior, currentValidity]);`
`192`	`192`	`}`
`193`	`193`
`194`	`194`	`function asArray<T>(v: T \| T[]): T[] {`