Include eslint-plugin-react-hooks in React sync (vercel#82294)

`eslint-plugin-react-hooks` is also published in React's nightly release cycle. I want to start dog fooding it in Next.js so that we can spot issues as early as possible.

It also includes some new heuristics that are important to flag React Compiler incompatibilities. Compat with the React Compiler of the Next.js codebase is especially relevant for Next DevTools which uses the React Compiler.

I'll follow-up on these violations. Each need different treatment.

Author: eps1lon

package.json

@@ -173,7 +173,7 @@
     "eslint-plugin-jsdoc": "48.0.4",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.35.0",
-    "eslint-plugin-react-hooks": "6.0.0-rc.1",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-c260b38d-20250731",
     "eslint-v8": "npm:eslint@^8.57.0",
     "event-stream": "4.0.1",
     "execa": "2.0.3",

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/hooks/use-minimum-loading-time-multiple.ts

@@ -31,6 +31,7 @@ export function useMinimumLoadingTimeMultiple(
       if (loadStartTimeRef.current === null) {
         loadStartTimeRef.current = Date.now()
       }
+      // eslint-disable-next-line react-hooks/react-compiler -- TODO
       setIsLoading(true)
     } else {
       // If we're exiting the "loading" state:

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/hooks/use-update-animation.ts

@@ -19,6 +19,7 @@ export function useUpdateAnimation(
         return
       }
 
+      // eslint-disable-next-line react-hooks/react-compiler -- TODO
       setAnimate(true)
       // It is important to use a CSS transitioned state, not a CSS keyframed animation
       // because if the issue count increases faster than the animation duration, it

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx

@@ -44,6 +44,7 @@ export function NextLogo({
   const width = measuredWidth === 0 ? 'auto' : measuredWidth
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/react-compiler -- TODO
     setIsErrorExpanded(hasError)
   }, [hasError])
 

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/resize/resize-handle.tsx

@@ -76,6 +76,7 @@ export const ResizeHandle = ({
     const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0
     const borderLeft = parseFloat(computedStyle.borderLeftWidth) || 0
 
+    // eslint-disable-next-line react-hooks/react-compiler -- TODO
     setBorderWidths({
       top: borderTop,
       right: borderRight,

packages/next/src/next-devtools/dev-overlay/components/dialog/dialog.tsx

@@ -36,6 +36,7 @@ const Dialog: React.FC<DialogProps> = function Dialog({
   )
 
   useOnClickOutside(
+    // eslint-disable-next-line react-hooks/react-compiler -- TODO
     dialogRef.current,
     CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE,
     (e) => {

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/shortcut-recorder.tsx

@@ -316,6 +316,7 @@ function MetaKey() {
   useEffect(() => {
     // Meta is Command on Apple devices, otherwise Control
     if (apple === true) {
+      // eslint-disable-next-line react-hooks/react-compiler -- TODO
       setLabel('⌘')
     }
 

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/drag-context.tsx

@@ -36,6 +36,7 @@ export function DragProvider({
   }, [])
 
   const value = useMemo<DragContextValue>(
+    // eslint-disable-next-line react-hooks/react-compiler -- TODO
     () => ({ register, unregister, handles: handlesRef.current, disabled }),
     [register, unregister, disabled]
   )

packages/next/src/next-devtools/dev-overlay/components/errors/error-message/error-message.tsx

@@ -13,6 +13,7 @@ export function ErrorMessage({ errorMessage }: ErrorMessageProps) {
 
   useLayoutEffect(() => {
     if (messageRef.current) {
+      // eslint-disable-next-line react-hooks/react-compiler -- TODO
       setShouldTruncate(messageRef.current.scrollHeight > 200)
     }
   }, [errorMessage])

packages/next/src/next-devtools/dev-overlay/components/overview/segment-boundary-trigger.tsx

@@ -48,6 +48,7 @@ export function SegmentBoundaryTrigger({
     () => {
       setIsOpen(false)
     },
+    // eslint-disable-next-line react-hooks/react-compiler -- TODO
     triggerRef.current?.ownerDocument
   )