Repository: vercel/next.js
Pull request: [devtools] Fix various `exhaustive-deps` violations

These fixes are pretty local and isolated so I felt safe bundling them up.

Changed files:
filename: packages/next/src/next-devtools/dev-overlay/components/dialog/dialog.tsx
patch: @@ -7,7 +7,6 @@ export type DialogProps = {
   'aria-describedby': string
   className?: string
   onClose?: () => void
-  dialogResizerRef?: React.RefObject<HTMLDivElement | null>
 } & React.HTMLAttributes<HTMLDivElement>
 
 const CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [
@@ -27,7 +26,6 @@ const Dialog: React.FC<DialogProps> = function Dialog({
   onClose,
   'aria-labelledby': ariaLabelledBy,
   'aria-describedby': ariaDescribedBy,
-  dialogResizerRef,
   ...props
 }) {
   const dialogRef = React.useRef<HTMLDivElement | null>(null)

filename: packages/next/src/next-devtools/dev-overlay/components/errors/dialog/dialog.tsx
patch: @@ -3,7 +3,6 @@ import { Dialog } from '../../dialog/dialog'
 type ErrorOverlayDialogProps = {
   children?: React.ReactNode
   onClose?: () => void
-  dialogResizerRef?: React.RefObject<HTMLDivElement | null>
   footer?: React.ReactNode
 } & React.HTMLAttributes<HTMLDivElement>
 

filename: packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.tsx
patch: @@ -128,7 +128,6 @@ export function ErrorOverlayLayout({
         />
         <ErrorOverlayDialog
           onClose={onClose}
-          dialogResizerRef={dialogResizerRef}
           data-has-footer={hasFooter}
           onScroll={onScroll}
           footer={hasFooter && <ErrorOverlayFooter errorCode={errorCode} />}

filename: packages/next/src/next-devtools/dev-overlay/components/resizer/index.tsx
patch: @@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, forwardRef } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 
 export const Resizer = forwardRef(function Resizer(
   {
@@ -11,8 +11,8 @@ export const Resizer = forwardRef(function Resizer(
   } & React.HTMLProps<HTMLDivElement>,
   resizerRef: React.Ref<HTMLDivElement | null>
 ) {
-  const ref = useRef<HTMLDivElement | null>(null)
-  const [height, measuring] = useMeasureHeight(ref, measure)
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const [height, measuring] = useMeasureHeight(element, measure)
 
   return (
     <div
@@ -26,13 +26,13 @@ export const Resizer = forwardRef(function Resizer(
         transition: 'height 250ms var(--timing-swift)',
       }}
     >
-      <div ref={ref}>{children}</div>
+      <div ref={setElement}>{children}</div>
     </div>
   )
 })
 
 function useMeasureHeight(
-  ref: React.RefObject<HTMLDivElement | null>,
+  element: HTMLDivElement | null,
   measure: boolean
 ): [number, boolean] {
   const [height, setHeight] = useState<number>(0)
@@ -44,9 +44,8 @@ function useMeasureHeight(
     }
 
     let timerId: number
-    const el = ref.current
 
-    if (!el) {
+    if (!element) {
       return
     }
 
@@ -60,10 +59,9 @@ function useMeasureHeight(
       setHeight(contentRect.height)
     })
 
-    observer.observe(el)
+    observer.observe(element)
     return () => observer.disconnect()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [measure])
+  }, [measure, element])
 
   return [height, measuring]
 }

filename: packages/next/src/next-devtools/dev-overlay/hooks/use-shortcuts.ts
patch: @@ -35,8 +35,7 @@ export function useShortcuts(
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shortcuts])
+  }, [rootRef, shortcuts])
 }
 
 export function isFocusedOnElement(