chore: set exhaustive deps eslint rule to error (#4207)

and fix the warnings in devtools

Author: TkDodo

.eslintrc

@@ -49,6 +49,7 @@
     "import/no-cycle": "error",
     "import/no-unresolved": ["error",  { "ignore": ["^@tanstack\/"] }],
     "import/no-unused-modules": ["off", { "unusedExports": true }],
-    "no-redeclare": "off"
+    "no-redeclare": "off",
+    "react-hooks/exhaustive-deps": "error"
   }
 }

packages/react-query-devtools/src/devtools.tsx

@@ -192,12 +192,13 @@ export function ReactQueryDevtools({
 
   React.useEffect(() => {
     if (isResolvedOpen) {
-      const previousValue = rootRef.current?.parentElement?.style.paddingBottom
+      const root = rootRef.current
+      const previousValue = root?.parentElement?.style.paddingBottom
 
       const run = () => {
         const containerHeight = panelRef.current?.getBoundingClientRect().height
-        if (rootRef.current?.parentElement) {
-          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`
+        if (root?.parentElement) {
+          root.parentElement.style.paddingBottom = `${containerHeight}px`
         }
       }
 
@@ -208,11 +209,8 @@ export function ReactQueryDevtools({
 
         return () => {
           window.removeEventListener('resize', run)
-          if (
-            rootRef.current?.parentElement &&
-            typeof previousValue === 'string'
-          ) {
-            rootRef.current.parentElement.style.paddingBottom = previousValue
+          if (root?.parentElement && typeof previousValue === 'string') {
+            root.parentElement.style.paddingBottom = previousValue
           }
         }
       }