update eslint-plugin-react-hooks to latest

eslint.config.mjs

@@ -10,7 +10,6 @@ import githubPlugin from 'eslint-plugin-github'
 import storybook from 'eslint-plugin-storybook'
 import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
-import reactCompiler from 'eslint-plugin-react-compiler'
 import {unsupportedPatterns as reactCompilerUnsupported} from './packages/react/script/react-compiler.mjs'
 import playwright from 'eslint-plugin-playwright'
 import prettierRecommended from 'eslint-plugin-prettier/recommended'
@@ -62,14 +61,6 @@ const config = defineConfig([
 
   ...fixupConfigRules([react.configs.flat.recommended, react.configs.flat['jsx-runtime']]),
   reactHooks.configs.flat['recommended-latest'],
-
-  // React Compiler
-  {
-    plugins: {'react-compiler': reactCompiler},
-    rules: {
-      'react-compiler/react-compiler': 'warn',
-    },
-  },
   // Disable react-compiler rule for files not yet migrated
   {
     files: reactCompilerUnsupported.map(p => `packages/react/${p}`),
@@ -357,7 +348,7 @@ const config = defineConfig([
   {
     files: ['**/playwright.config.ts', 'e2e/**/*.{ts,tsx}'],
     plugins: {
-      playwright: playwright,
+      playwright,
     },
     ...playwright.configs['flat/recommended'],
     rules: {

package.json

@@ -77,8 +77,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-primer-react": "^8.5.2",
     "eslint-plugin-react": "^7.35.5",
-    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-ssr-friendly": "1.3.0",
     "eslint-plugin-storybook": "^10.3.3",
     "eslint-plugin-testing-library": "^7.16.0",
@@ -116,4 +115,4 @@
     }
   ],
   "packageManager": "npm@11.6.3+sha512.4085a763162e0e3acd19a4e9d23ad3aa0978e501ccf947dd7233c12a689ae0bb0190763c4ef12366990056b34eec438903ffed38fde4fbd722a17c2a7407ee92"
-}
+}

packages/react/src/ActionList/ActionList.examples.stories.tsx

@@ -40,7 +40,6 @@ const NextJSLikeLink = forwardRef(
       ref,
       href,
     }
-    // eslint-disable-next-line react-hooks/refs
     return <>{React.isValidElement(child) ? React.cloneElement(child, childProps) : null}</>
   },
 )

packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -263,51 +263,52 @@ export const ShortcutMenu = () => {
   )
 }
 
-export const ContextMenu = () => {
-  const ListItemWithContextMenu = ({children}: {children: string}) => {
-    const handleContextMenu: React.MouseEventHandler<HTMLElement> = event => {
-      event.preventDefault()
-      setOpen(true)
-    }
+const ListItemWithContextMenu = ({children}: {children: string}) => {
+  const [open, setOpen] = React.useState(false)
 
-    const [open, setOpen] = React.useState(false)
-    const triggerRef = React.useRef<HTMLButtonElement>(null)
-
-    return (
-      <li onContextMenu={handleContextMenu}>
-        <ActionMenu open={open} onOpenChange={setOpen} anchorRef={triggerRef}>
-          <ActionMenu.Anchor>
-            <Button ref={triggerRef} variant="invisible" onClick={handleContextMenu}>
-              {children}
-            </Button>
-          </ActionMenu.Anchor>
-          <ActionMenu.Overlay>
-            <ActionList>
-              <ActionList.Item>
-                Copy link
-                <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
-              </ActionList.Item>
-              <ActionList.Item>
-                Quote reply
-                <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
-              </ActionList.Item>
-              <ActionList.Item>
-                Edit comment
-                <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
-              </ActionList.Item>
-              <ActionList.LinkItem href="#">View file</ActionList.LinkItem>
-              <ActionList.Divider />
-              <ActionList.Item variant="danger">
-                Delete file
-                <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
-              </ActionList.Item>
-            </ActionList>
-          </ActionMenu.Overlay>
-        </ActionMenu>
-      </li>
-    )
+  const handleContextMenu: React.MouseEventHandler<HTMLElement> = event => {
+    event.preventDefault()
+    setOpen(true)
   }
 
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  return (
+    <li onContextMenu={handleContextMenu}>
+      <ActionMenu open={open} onOpenChange={setOpen} anchorRef={triggerRef}>
+        <ActionMenu.Anchor>
+          <Button ref={triggerRef} variant="invisible" onClick={handleContextMenu}>
+            {children}
+          </Button>
+        </ActionMenu.Anchor>
+        <ActionMenu.Overlay>
+          <ActionList>
+            <ActionList.Item>
+              Copy link
+              <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+            </ActionList.Item>
+            <ActionList.Item>
+              Quote reply
+              <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+            </ActionList.Item>
+            <ActionList.Item>
+              Edit comment
+              <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+            </ActionList.Item>
+            <ActionList.LinkItem href="#">View file</ActionList.LinkItem>
+            <ActionList.Divider />
+            <ActionList.Item variant="danger">
+              Delete file
+              <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+            </ActionList.Item>
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </li>
+  )
+}
+
+export const ContextMenu = () => {
   return (
     <>
       <div>Right click the list items below to see the context menu</div>

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -165,6 +165,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
 }) => {
   const cssAnchorPositioningFlag = useFeatureFlag('primer_react_css_anchor_positioning')
   const supportsNativeCSSAnchorPositioning = useRef(false)
+  // eslint-disable-next-line react-hooks/refs
   const cssAnchorPositioning = cssAnchorPositioningFlag && supportsNativeCSSAnchorPositioning.current
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
@@ -221,6 +222,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
       displayInViewport,
       onPositionChange: positionChange,
     },
+    // eslint-disable-next-line react-hooks/refs
     [overlayRef.current],
   )
 
@@ -256,11 +258,13 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
         overlay.style.removeProperty('position-anchor')
       }
     }
+    // eslint-disable-next-line react-hooks/refs
   }, [cssAnchorPositioning, anchorRef, overlayRef, id, open])
 
   // Track the overlay element so we can re-run the effect when it changes.
   // The overlay unmounts when closed, so each open creates a new DOM node -
   // that needs showPopover() called.
+  // eslint-disable-next-line react-hooks/refs
   const overlayElement = overlayRef.current
 
   useLayoutEffect(() => {
@@ -289,6 +293,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
     } catch {
       // Ignore if popover is already showing or not supported
     }
+    // eslint-disable-next-line react-hooks/refs
   }, [cssAnchorPositioning, open, overlayElement, id, overlayRef, anchorRef, width])
 
   const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton
@@ -300,6 +305,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   return (
     <>
       {renderAnchor &&
+        // eslint-disable-next-line react-hooks/refs
         renderAnchor({
           ref: anchorRef,
           id: anchorId,

packages/react/src/Autocomplete/Autocomplete.features.stories.tsx

@@ -556,7 +556,6 @@ export const InADialog = () => {
   useEffect(() => {
     if (outerContainerRef.current instanceof HTMLElement) {
       registerPortalRoot(outerContainerRef.current, 'outerContainer')
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setMounted(true)
     }
   }, [isDialogOpen])

packages/react/src/DataTable/storybook/data.ts

@@ -109,6 +109,7 @@ export function useQuery<T>(
   React.useEffect(() => {
     const controller = new AbortController()
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setLoading(true)
     setError(null)
     setData(null)