chore: upgrade oxlint to 1.70.0 and enable react/react-compiler rule

.oxlintrc.json

@@ -6,10 +6,6 @@
     {
       "name": "monorepo",
       "specifier": "@jdb8/eslint-plugin-monorepo"
-    },
-    {
-      "name": "react-hooks-js",
-      "specifier": "eslint-plugin-react-hooks"
     }
   ],
   "categories": {
@@ -169,19 +165,7 @@
     "react/rules-of-hooks": "error",
     "react/exhaustive-deps": "warn",
 
-    // React Compiler rules
-    "react-hooks-js/config": "error",
-    "react-hooks-js/error-boundaries": "error",
-    "react-hooks-js/component-hook-factories": "error",
-    "react-hooks-js/gating": "error",
-    "react-hooks-js/globals": "error",
-    "react-hooks-js/purity": "error",
-    "react-hooks-js/set-state-in-effect": "warn",
-    "react-hooks-js/set-state-in-render": "error",
-    "react-hooks-js/static-components": "error",
-    "react-hooks-js/unsupported-syntax": "warn",
-    "react-hooks-js/use-memo": "error",
-    "react-hooks-js/incompatible-library": "warn",
+    "react/react-compiler": "error",
 
     "rsp-rules/no-react-key": ["error"],
     "rsp-rules/sort-imports": ["error"],

package.json

@@ -153,7 +153,6 @@
     "diff": "^5.1.0",
     "eslint-import-resolver-node": "^0.3.10",
     "eslint-plugin-jest": "29.15.2",
-    "eslint-plugin-react-hooks": "^7.0.0",
     "exceljs": "^4.4.0",
     "fast-check": "^2.19.0",
     "fast-glob": "^3.1.0",
@@ -175,7 +174,7 @@
     "motion": "^12.23.6",
     "npm-cli-login": "^1.0.0",
     "oxfmt": "^0.48.0",
-    "oxlint": "^1.63.0",
+    "oxlint": "^1.70.0",
     "parcel": "^2.16.3",
     "parcel-optimizer-strict-mode": "workspace:^",
     "patch-package": "^6.2.0",

packages/@adobe/react-spectrum/chromatic/provider/Provider.stories.tsx

@@ -127,6 +127,7 @@ const ResponsiveStyleTemplate = (props: ProviderProps): JSX.Element => (
 
 const CustomResponsivStylePropsTemplate = (props: ProviderProps): JSX.Element => {
   let Breakpoint = () => {
+    // oxlint-disable-next-line react/react-compiler
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
     let width = {
@@ -149,13 +150,15 @@ const CustomResponsivStylePropsTemplate = (props: ProviderProps): JSX.Element =>
   };
   return (
     <Provider breakpoints={{S: 480, M: 640, L: 1024}} UNSAFE_style={{padding: 50}} {...props}>
+      {/* oxlint-disable-next-line react/react-compiler */}
       <Breakpoint />
     </Provider>
   );
 };
 
 const BreakpointOmittedTemplate = (props: ProviderProps): JSX.Element => {
   let Breakpoint = () => {
+    // oxlint-disable-next-line react/react-compiler
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
     let width = {base: 'size-1600', S: 'size-2400', L: 'size-3400'};
@@ -170,6 +173,7 @@ const BreakpointOmittedTemplate = (props: ProviderProps): JSX.Element => {
   };
   return (
     <Provider UNSAFE_style={{padding: 50}} {...props}>
+      {/* oxlint-disable-next-line react/react-compiler */}
       <Breakpoint />
     </Provider>
   );

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

@@ -260,6 +260,7 @@ export const ActionGroup = forwardRef(function ActionGroup<T extends object>(
         return wrapperRef.current?.parentElement;
       }
     }),
+    // oxlint-disable-next-line react/react-compiler
     [wrapperRef]
   );
   useResizeObserver({
@@ -484,8 +485,11 @@ function ActionGroupMenu<T>({
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/actiongroup');
 
   // The menu button shouldn't act like an actual action group item.
+  // oxlint-disable-next-line react/react-compiler
   delete buttonProps.onPress;
+  // oxlint-disable-next-line react/react-compiler
   delete buttonProps.role;
+  // oxlint-disable-next-line react/react-compiler
   delete buttonProps['aria-checked'];
 
   let {hoverProps, isHovered} = useHover({isDisabled});

packages/@adobe/react-spectrum/src/autocomplete/MobileSearchAutocomplete.tsx

@@ -63,6 +63,7 @@ function ForwardMobileSearchAutocomplete<T extends object>(
   props: SpectrumSearchAutocompleteProps<T>,
   ref: FocusableRef<HTMLElement>
 ) {
+  // oxlint-disable-next-line react/react-compiler
   props = useProviderProps(props);
 
   let {
@@ -117,6 +118,7 @@ function ForwardMobileSearchAutocomplete<T extends object>(
   });
 
   // Focus the button and show focus ring when clicking on the label
+  // oxlint-disable-next-line react/react-compiler
   labelProps.onClick = () => {
     if (!props.isDisabled && buttonRef.current) {
       buttonRef.current.focus();
@@ -417,8 +419,11 @@ function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
   // VoiceOver on iOS reads "double tap to collapse" when focused on the input rather than
   // "double tap to edit text", as with a textbox or searchbox. We'd like double tapping to
   // open the virtual keyboard rather than closing the tray.
+  // oxlint-disable-next-line react/react-compiler
   inputProps.role = 'searchbox';
+  // oxlint-disable-next-line react/react-compiler
   inputProps['aria-haspopup'] = 'listbox';
+  // oxlint-disable-next-line react/react-compiler
   delete inputProps.onTouchEnd;
 
   let clearButton = (
@@ -486,6 +491,7 @@ function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
       }
     } else if (loadingState !== 'filtering') {
       // If loading is no longer happening, clear any timers and hide the loading circle
+      // oxlint-disable-next-line react/react-compiler
       setShowLoading(false);
       if (timeout.current !== null) {
         clearTimeout(timeout.current);

packages/@adobe/react-spectrum/src/autocomplete/SearchAutocomplete.tsx

@@ -120,6 +120,7 @@ function SearchAutocomplete<T extends object>(
   props: SpectrumSearchAutocompleteProps<T>,
   ref: FocusableRef<HTMLElement>
 ) {
+  // oxlint-disable-next-line react/react-compiler
   props = useProviderProps(props);
   props = useFormProps(props);
 

packages/@adobe/react-spectrum/src/button/Button.tsx

@@ -120,6 +120,7 @@ export const Button = React.forwardRef(function Button<T extends ElementType = '
       }, 1000);
     } else {
       // Exit loading state when isPending is set to false. */
+      // oxlint-disable-next-line react/react-compiler
       setIsProgressVisible(false);
     }
     return () => {

packages/@adobe/react-spectrum/src/button/ClearButton.tsx

@@ -56,6 +56,7 @@ export const ClearButton = React.forwardRef(function ClearButton(
   // iOS 14 with VoiceOver doesn't focus the button and hide the keyboard when
   // moving the cursor over the clear button.
   if (preventFocus) {
+    // oxlint-disable-next-line react/react-compiler
     delete buttonProps.tabIndex;
   }
 

packages/@adobe/react-spectrum/src/buttongroup/ButtonGroup.tsx

@@ -60,6 +60,7 @@ export const ButtonGroup = React.forwardRef(function ButtonGroup(
   let domRef = useDOMRef(ref);
   let [hasOverflow, setHasOverflow] = useValueEffect(false);
 
+  // oxlint-disable react/react-compiler, react-hooks/exhaustive-deps
   let checkForOverflow = useCallback(() => {
     let computeHasOverflow = () => {
       if (domRef.current && orientation === 'horizontal') {
@@ -86,8 +87,8 @@ export const ButtonGroup = React.forwardRef(function ButtonGroup(
         yield computeHasOverflow();
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [domRef, orientation, scale, setHasOverflow, children]);
+  // oxlint-enable react/react-compiler, react-hooks/exhaustive-deps
 
   // There are two main reasons we need to remeasure:
   // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)
@@ -97,12 +98,13 @@ export const ButtonGroup = React.forwardRef(function ButtonGroup(
 
   // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure
   let parent = useRef<HTMLElement>(undefined);
+  // oxlint-disable react/react-compiler, react-hooks/exhaustive-deps
   useLayoutEffect(() => {
     if (domRef.current) {
       parent.current = domRef.current.parentElement as HTMLElement;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [domRef.current]);
+  // oxlint-enable react/react-compiler, react-hooks/exhaustive-deps
   useResizeObserver({ref: parent, onResize: checkForOverflow});
 
   return (

packages/@adobe/react-spectrum/src/card/CardBase.tsx

@@ -111,6 +111,7 @@ export const CardBase = React.forwardRef(function CardBase<T extends object>(
         UNSAFE_className: classNames(styles, 'spectrum-Card-image'),
         objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
         alt: '',
+        // oxlint-disable-next-line react/react-compiler
         ...aspectRatioEnforce
       },
       illustration: {

packages/@adobe/react-spectrum/src/card/CardView.tsx

@@ -100,7 +100,9 @@ export const CardView = React.forwardRef(function CardView<T extends object>(
     focusMode: 'cell'
   });
 
+  // oxlint-disable-next-line react/react-compiler
   cardViewLayout.collection = gridCollection;
+  // oxlint-disable-next-line react/react-compiler
   cardViewLayout.disabledKeys = state.disabledKeys;
 
   let {gridProps} = useGrid(
@@ -263,6 +265,7 @@ function InternalCard(props) {
   // We don't want to focus the checkbox (or any other focusable elements) within the Card
   // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
   // the cards in the CardView is handled by useGrid => useSelectableCollection instead.
+  // oxlint-disable-next-line react/react-compiler
   delete gridCellProps.onKeyDownCapture;
   return (
     <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>

packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx

@@ -68,7 +68,7 @@ export const Checkbox = forwardRef(function Checkbox(
   // but since the checkbox won't move in and out of a group, it should be safe.
   let groupState = useContext(CheckboxGroupContext);
   let {labelProps, inputProps, isInvalid, isDisabled} = groupState
-    ? // eslint-disable-next-line react-hooks/rules-of-hooks
+    ? // oxlint-disable-next-line react/react-compiler, react-hooks/rules-of-hooks
       useCheckboxGroupItem(
         {
           ...props,
@@ -85,7 +85,7 @@ export const Checkbox = forwardRef(function Checkbox(
         groupState,
         inputRef
       )
-    : // eslint-disable-next-line react-hooks/rules-of-hooks
+    : // oxlint-disable-next-line react/react-compiler, react-hooks/rules-of-hooks
       useCheckbox(props, useToggleState(props), inputRef);
 
   let {hoverProps, isHovered} = useHover({isDisabled});

packages/@adobe/react-spectrum/src/color/ColorField.tsx

@@ -59,6 +59,7 @@ export const ColorField = React.forwardRef(function ColorField(
   props: SpectrumColorFieldProps,
   ref: Ref<TextFieldRef>
 ) {
+  // oxlint-disable-next-line react/react-compiler
   props = useProviderProps(props);
   props = useFormProps(props);
   [props] = useContextProps(props, null, ColorFieldContext);

packages/@adobe/react-spectrum/src/color/ColorPicker.tsx

@@ -56,6 +56,7 @@ export const ColorPicker = React.forwardRef(function ColorPicker(
   let labelId = useId();
   return (
     <AriaColorPicker {...props}>
+      {/* oxlint-disable-next-line react/react-compiler */}
       <DialogTrigger type="popover" mobileType="tray" targetRef={unwrapDOMRef(swatchRef)}>
         <Button
           ref={domRef}

packages/@adobe/react-spectrum/src/color/ColorSwatch.tsx

@@ -111,6 +111,7 @@ export const ColorSwatch = forwardRef(function ColorSwatch(
 
   // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
   if (ctx) {
+    // oxlint-disable-next-line react/react-compiler
     return ctx.useWrapper(swatch, color, rounding);
   }
 

packages/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx

@@ -77,6 +77,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(
           }
         })({density})
       }>
+      {/* oxlint-disable-next-line react/react-compiler */}
       <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>
         {props.children}
       </SpectrumColorSwatchContext.Provider>

packages/@adobe/react-spectrum/src/color/ColorWheel.tsx

@@ -54,6 +54,7 @@ export const ColorWheel = React.forwardRef(function ColorWheel(
   let [wheelRadius, setWheelRadius] = useState<number>(0);
   let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);
 
+  // oxlint-disable-next-line react/react-compiler
   let resizeHandler = useCallback(() => {
     if (containerRef.current) {
       setWheelRadius(containerRef.current.offsetWidth / 2);

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

@@ -141,6 +141,7 @@ export const ComboBox = React.forwardRef(function ComboBox<T extends object>(
   props: SpectrumComboBoxProps<T>,
   ref: FocusableRef<HTMLElement>
 ) {
+  // oxlint-disable-next-line react/react-compiler
   props = useProviderProps(props);
   props = useFormProps(props);
 

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

@@ -67,6 +67,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox(
   props: SpectrumComboBoxProps<any>,
   ref: FocusableRef<HTMLElement>
 ) {
+  // oxlint-disable-next-line react/react-compiler
   props = useProviderProps(props);
 
   let {
@@ -119,6 +120,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox(
   });
 
   // Focus the button and show focus ring when clicking on the label
+  // oxlint-disable-next-line react/react-compiler
   labelProps.onClick = () => {
     if (!props.isDisabled) {
       buttonRef.current?.focus();
@@ -343,6 +345,7 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
       ...props,
       // completionMode,
       layoutDelegate: layout,
+      // oxlint-disable-next-line react/react-compiler
       buttonRef: unwrapDOMRef(buttonRef),
       popoverRef: popoverRef,
       listBoxRef,
@@ -382,9 +385,13 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
   // "double tap to edit text", as with a textbox or searchbox. We'd like double tapping to
   // open the virtual keyboard rather than closing the tray.
   // Unlike "combobox", "aria-expanded" is not a valid attribute on "searchbox".
+  // oxlint-disable-next-line react/react-compiler
   inputProps.role = 'searchbox';
+  // oxlint-disable-next-line react/react-compiler
   inputProps['aria-haspopup'] = 'listbox';
+  // oxlint-disable-next-line react/react-compiler
   delete inputProps['aria-expanded'];
+  // oxlint-disable-next-line react/react-compiler
   delete inputProps.onTouchEnd;
 
   let clearButton = (
@@ -453,6 +460,7 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
       }
     } else if (loadingState !== 'filtering') {
       // If loading is no longer happening, clear any timers and hide the loading circle
+      // oxlint-disable-next-line react/react-compiler
       setShowLoading(false);
       if (timeout.current) {
         clearTimeout(timeout.current);

packages/@adobe/react-spectrum/src/datepicker/DateField.tsx

@@ -106,6 +106,7 @@ export const DateField = React.forwardRef(function DateField<T extends DateValue
   // The format help text is unnecessary for screen reader users because each segment already has a label.
   let description = useFormatHelpText(props);
   if (description && !props.description) {
+    // oxlint-disable-next-line react/react-compiler
     descriptionProps.id = undefined;
   }
 

packages/@adobe/react-spectrum/src/datepicker/DatePicker.tsx

@@ -139,6 +139,7 @@ export const DatePicker = React.forwardRef(function DatePicker<T extends DateVal
   // The format help text is unnecessary for screen reader users because each segment already has a label.
   let description = useFormatHelpText(props);
   if (description && !props.description) {
+    // oxlint-disable-next-line react/react-compiler
     descriptionProps.id = undefined;
   }
 

packages/@adobe/react-spectrum/src/datepicker/DateRangePicker.tsx

@@ -119,6 +119,7 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
   // The format help text is unnecessary for screen reader users because each segment already has a label.
   let description = useFormatHelpText(props);
   if (description && !props.description) {
+    // oxlint-disable-next-line react/react-compiler
     descriptionProps.id = undefined;
   }
 

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

@@ -71,9 +71,13 @@ export const Dialog = React.forwardRef(function Dialog(props: SpectrumDialogProp
   let sizeVariant = sizeMap[type] || sizeMap[size];
   let {dialogProps, titleProps} = useDialog(mergeProps(contextProps, props), domRef);
 
+  // oxlint-disable-next-line react/react-compiler
   let hasHeader = useHasChild(`.${styles['spectrum-Dialog-header']}`, unwrapDOMRef(gridRef));
+  // oxlint-disable-next-line react/react-compiler
   let hasHeading = useHasChild(`.${styles['spectrum-Dialog-heading']}`, unwrapDOMRef(gridRef));
+  // oxlint-disable-next-line react/react-compiler
   let hasFooter = useHasChild(`.${styles['spectrum-Dialog-footer']}`, unwrapDOMRef(gridRef));
+  // oxlint-disable-next-line react/react-compiler
   let hasTypeIcon = useHasChild(`.${styles['spectrum-Dialog-typeIcon']}`, unwrapDOMRef(gridRef));
 
   let slots = useMemo(
@@ -89,6 +93,7 @@ export const Dialog = React.forwardRef(function Dialog(props: SpectrumDialogProp
       },
       header: {
         UNSAFE_className: classNames(styles, 'spectrum-Dialog-header', {
+          // oxlint-disable-next-line react/react-compiler
           'spectrum-Dialog-header--noHeading': !hasHeading,
           'spectrum-Dialog-header--noTypeIcon': !hasTypeIcon
         })