[pull] canary from vercel:canary

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { useUpdateAnimation } from './hooks/use-update-animation'
 import { useMeasureWidth } from './hooks/use-measure-width'
 import { useMinimumLoadingTimeMultiple } from './hooks/use-minimum-loading-time-multiple'
@@ -28,6 +28,12 @@ export function NextLogo({
 
   const hasError = totalErrorCount > 0
   const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)
+  const [previousHasError, setPreviousHasError] = useState(hasError)
+  if (previousHasError !== hasError) {
+    setPreviousHasError(hasError)
+    // Reset the expanded state when the error state changes
+    setIsErrorExpanded(hasError)
+  }
   const [dismissed, setDismissed] = useState(false)
   const newErrorDetected = useUpdateAnimation(
     totalErrorCount,
@@ -43,10 +49,6 @@ export function NextLogo({
   const isExpanded = isErrorExpanded || state.disableDevIndicator
   const width = measuredWidth === 0 ? 'auto' : measuredWidth
 
-  useEffect(() => {
-    setIsErrorExpanded(hasError)
-  }, [hasError])
-
   return (
     <div
       data-next-badge-root

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
   )
 

packages/next/src/next-devtools/dev-overlay/components/shadow-portal.tsx

@@ -38,7 +38,7 @@ export function ShadowPortal({ children }: { children: React.ReactNode }) {
     forceUpdate({})
   }, [state.theme])
 
-  return shadowNode.current
-    ? createPortal(children, shadowNode.current as any)
-    : null
+  // eslint-disable-next-line react-hooks/react-compiler -- TODO
+  const shadowRoot = shadowNode.current
+  return shadowRoot ? createPortal(children, shadowRoot as any) : null
 }

packages/next/src/next-devtools/dev-overlay/hooks/use-delayed-render.ts

@@ -43,6 +43,7 @@ export function useDelayedRender(active = false, options: Options = {}) {
     let unmountTimeout: Timeout | undefined
 
     if (active) {
+      // eslint-disable-next-line react-hooks/react-compiler -- intentional cascading update
       setMounted(true)
       if (enterDelay <= 0) {
         setRendered(true)