Clean up all lint warnings

packages/@react-aria/overlays/src/useOverlayPosition.ts

@@ -86,21 +86,6 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     placement: undefined
   });
 
-  let deps = [
-    shouldUpdatePosition,
-    placement,
-    overlayRef.current,
-    targetRef.current,
-    scrollRef.current,
-    containerPadding,
-    shouldFlip,
-    boundaryElement,
-    offset,
-    crossOffset,
-    isOpen,
-    direction
-  ];
-
   let updatePosition = useCallback(() => {
     if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) {
       return;
@@ -120,12 +105,10 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       })
     );
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, [shouldUpdatePosition, placement, overlayRef, targetRef, scrollRef, containerPadding, shouldFlip, boundaryElement, offset, crossOffset, isOpen, direction]);
 
   // Update position when anything changes
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(updatePosition, deps);
+  useEffect(updatePosition, [updatePosition]);
 
   // Update position on window resize
   useResize(updatePosition);

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -120,6 +120,7 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     return () => {
       clearTimeout(state.scrollTimeout);
     };
+  // We only need to cleanup state.scrollTimeout on unmount here, don't want to constantly clearTimeout by including state.scrollTimeout in dep array
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

@@ -12,7 +12,7 @@
 
 import {ActionButton} from '@react-spectrum/button';
 import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css';
-import {classNames, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {classNames, useDOMRef, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DOMProps, DOMRef, Node, StyleProps} from '@react-types/shared';
 import {ListState, useListState} from '@react-stately/list';
 import {mergeProps} from '@react-aria/utils';
@@ -97,7 +97,7 @@ interface ActionGroupItemProps<T> extends DOMProps, StyleProps {
 
 function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, onAction}: ActionGroupItemProps<T>) {
   let ref = useRef();
-  let {buttonProps} = useActionGroupItem({key: item.key}, state, unwrapDOMRef(ref));
+  let {buttonProps} = useActionGroupItem({key: item.key}, state, useUnwrapDOMRef(ref));
   isDisabled = isDisabled || state.disabledKeys.has(item.key);
   let isSelected = state.selectionManager.isSelected(item.key);
   let {hoverProps, isHovered} = useHover({isDisabled});

packages/@react-spectrum/combobox/src/ComboBox.tsx

@@ -12,7 +12,7 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
-import {classNames, unwrapDOMRef, useFocusableRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {classNames, useFocusableRef, useIsMobileDevice, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
@@ -52,7 +52,9 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
   } = props;
 
   let popoverRef = useRef<DOMRefValue<HTMLDivElement>>();
+  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);
   let buttonRef = useRef<FocusableRefValue<HTMLElement>>();
+  let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);
   let listBoxRef = useRef();
   let inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>();
   let domRef = useFocusableRef(ref, inputRef);
@@ -65,8 +67,8 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
     {
       ...props,
       keyboardDelegate: layout,
-      buttonRef: unwrapDOMRef(buttonRef),
-      popoverRef: unwrapDOMRef(popoverRef),
+      buttonRef: unwrappedButtonRef,
+      popoverRef: unwrappedPopoverRef,
       listBoxRef,
       inputRef: inputRef,
       menuTrigger
@@ -75,8 +77,8 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
   );
 
   let {overlayProps, placement} = useOverlayPosition({
-    targetRef: unwrapDOMRef(buttonRef),
-    overlayRef: unwrapDOMRef(popoverRef),
+    targetRef: unwrappedButtonRef,
+    overlayRef: unwrappedPopoverRef,
     scrollRef: listBoxRef,
     placement: `${direction} end` as Placement,
     shouldFlip: shouldFlip,

packages/@react-spectrum/combobox/src/MobileComboBox.tsx

@@ -15,7 +15,7 @@ import {AriaButtonProps} from '@react-types/button';
 import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
 import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
-import {classNames, unwrapDOMRef} from '@react-spectrum/utils';
+import {classNames, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {ClearButton} from '@react-spectrum/button';
 import {ComboBoxState, useComboBoxState} from '@react-stately/combobox';
 import comboboxStyles from './combobox.css';
@@ -289,7 +289,7 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
       ...props,
       // completionMode,
       keyboardDelegate: layout,
-      buttonRef: unwrapDOMRef(buttonRef),
+      buttonRef: useUnwrapDOMRef(buttonRef),
       popoverRef: popoverRef,
       listBoxRef,
       inputRef,

packages/@react-spectrum/dialog/src/Dialog.tsx

@@ -11,7 +11,7 @@
  */
 
 import {ActionButton} from '@react-spectrum/button';
-import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
+import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
 import CrossLarge from '@spectrum-icons/ui/CrossLarge';
 import {DialogContext, DialogContextValue} from './context';
 import {DismissButton} from '@react-aria/overlays';
@@ -54,11 +54,12 @@ function Dialog(props: SpectrumDialogProps, ref: DOMRef) {
 
   let domRef = useDOMRef(ref);
   let gridRef = useRef();
+  let unwrappedGridRef = useUnwrapDOMRef(gridRef);
   let sizeVariant = sizeMap[type] || sizeMap[size];
   let {dialogProps, titleProps} = useDialog(mergeProps(contextProps, props), domRef);
 
-  let hasHeader = useHasChild(`.${styles['spectrum-Dialog-header']}`, unwrapDOMRef(gridRef));
-  let hasFooter = useHasChild(`.${styles['spectrum-Dialog-footer']}`, unwrapDOMRef(gridRef));
+  let hasHeader = useHasChild(`.${styles['spectrum-Dialog-header']}`, unwrappedGridRef);
+  let hasFooter = useHasChild(`.${styles['spectrum-Dialog-footer']}`, unwrappedGridRef);
 
   let slots = {
     hero: {UNSAFE_className: styles['spectrum-Dialog-hero']},

packages/@react-spectrum/dialog/src/DialogTrigger.tsx

@@ -17,7 +17,7 @@ import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overla
 import {PressResponder} from '@react-aria/interactions';
 import React, {Fragment, ReactElement, useEffect, useRef} from 'react';
 import {SpectrumDialogClose, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-types/dialog';
-import {unwrapDOMRef, useMediaQuery} from '@react-spectrum/utils';
+import {useMediaQuery, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {useOverlayPosition, useOverlayTrigger} from '@react-aria/overlays';
 
 function DialogTrigger(props: SpectrumDialogTriggerProps) {
@@ -148,7 +148,7 @@ function PopoverTrigger({state, targetRef, trigger, content, hideArrow, isKeyboa
   let overlayRef = useRef<DOMRefValue<HTMLDivElement>>();
   let {overlayProps: popoverProps, placement, arrowProps} = useOverlayPosition({
     targetRef: targetRef || triggerRef,
-    overlayRef: unwrapDOMRef(overlayRef),
+    overlayRef: useUnwrapDOMRef(overlayRef),
     placement: props.placement,
     containerPadding: props.containerPadding,
     offset: props.offset,

packages/@react-spectrum/menu/src/MenuTrigger.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {classNames, useDOMRef, useIsMobileDevice, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
@@ -46,7 +46,7 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
   let isMobile = useIsMobileDevice();
   let {overlayProps: positionProps, placement} = useOverlayPosition({
     targetRef: menuTriggerRef,
-    overlayRef: unwrapDOMRef(menuPopoverRef),
+    overlayRef: useUnwrapDOMRef(menuPopoverRef),
     scrollRef: menuRef,
     placement: `${direction} ${align}` as Placement,
     shouldFlip: shouldFlip,

packages/@react-spectrum/picker/src/Picker.tsx

@@ -12,7 +12,7 @@
 
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
-import {classNames, dimensionValue, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';
+import {classNames, dimensionValue, SlotProvider, useDOMRef, useIsMobileDevice, useStyleProps, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRef, DOMRefValue, FocusableRefValue, LabelPosition} from '@react-types/shared';
 import {FieldButton} from '@react-spectrum/button';
@@ -28,7 +28,7 @@ import {Placement} from '@react-types/overlays';
 import {Popover, Tray} from '@react-spectrum/overlays';
 import {PressResponder, useHover} from '@react-aria/interactions';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, useCallback, useMemo, useRef, useState} from 'react';
+import React, {ReactElement, useCallback, useRef, useState} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 import styles from '@adobe/spectrum-css-temp/components/dropdown/vars.css';
 import {Text} from '@react-spectrum/text';
@@ -64,7 +64,9 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
   let domRef = useDOMRef(ref);
 
   let popoverRef = useRef<DOMRefValue<HTMLDivElement>>();
+  let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);
   let triggerRef = useRef<FocusableRefValue<HTMLElement>>();
+  let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);
   let listboxRef = useRef();
 
   // We create the listbox layout in Picker and pass it to ListBoxBase below
@@ -74,12 +76,12 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
   let {labelProps, triggerProps, valueProps, menuProps} = useSelect({
     ...props,
     keyboardDelegate: layout
-  }, state, unwrapDOMRef(triggerRef));
+  }, state, unwrappedTriggerRef);
 
   let isMobile = useIsMobileDevice();
   let {overlayProps, placement, updatePosition} = useOverlayPosition({
-    targetRef: unwrapDOMRef(triggerRef),
-    overlayRef: unwrapDOMRef(popoverRef),
+    targetRef: unwrappedTriggerRef,
+    overlayRef: unwrappedPopoverRef,
     scrollRef: listboxRef,
     placement: `${direction} ${align}` as Placement,
     shouldFlip: shouldFlip,
@@ -135,17 +137,14 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
     }
   }, [scale, isMobile, triggerRef, state.selectedKey]);
 
-  // Make sure we only unwrap if the trigger changes otherwise we'll retrigger
-  // the observer too often
-  let resizeRef = useMemo(() => unwrapDOMRef(triggerRef), [triggerRef]);
 
   let onResize = useCallback(() => {
-    let width = resizeRef.current.offsetWidth;
+    let width = unwrappedTriggerRef.current.offsetWidth;
     setButtonWidth(width);
-  }, [resizeRef, setButtonWidth]);
+  }, [unwrappedTriggerRef, setButtonWidth]);
 
   useResizeObserver({
-    ref: resizeRef,
+    ref: unwrappedTriggerRef,
     onResize: onResize
   });
 
@@ -203,7 +202,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
       <HiddenSelect
         isDisabled={isDisabled}
         state={state}
-        triggerRef={unwrapDOMRef(triggerRef)}
+        triggerRef={unwrappedTriggerRef}
         label={label}
         name={name} />
       <PressResponder {...mergeProps(hoverProps, triggerProps)}>

packages/@react-spectrum/tabs/src/Tabs.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps, useValueEffect} from '@react-spectrum/utils';
+import {classNames, SlotProvider, useDOMRef, useStyleProps, useUnwrapDOMRef, useValueEffect} from '@react-spectrum/utils';
 import {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {Item, Picker} from '@react-spectrum/picker';
@@ -346,12 +346,12 @@ function TabPicker<T>(props: TabPickerProps<T>) {
   } = props;
 
   let ref = useRef();
+  let unwrappedRef = useUnwrapDOMRef(ref);
   let [pickerNode, setPickerNode] = useState(null);
 
   useEffect(() => {
-    let node = unwrapDOMRef(ref);
-    setPickerNode(node.current);
-  }, [ref]);
+    setPickerNode(unwrappedRef);
+  }, [unwrappedRef]);
 
   let items = [...state.collection].map((item) => ({
     rendered: item.rendered,