fix(devtools): do not render DevTools during SSR (TanStack#2615)

Author: verekia

src/devtools/devtools.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import { useQueryClient } from 'react-query'
 import { matchSorter } from 'match-sorter'
 import useLocalStorage from './useLocalStorage'
-import { useSafeState } from './utils'
+import { useIsMounted, useSafeState } from './utils'
 
 import {
   Panel,
@@ -95,6 +95,7 @@ export function ReactQueryDevtools({
   )
   const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)
   const [isResizing, setIsResizing] = useSafeState(false)
+  const isMounted = useIsMounted()
 
   const handleDragStart = (panelElement, startEvent) => {
     if (startEvent.button !== 0) return // Only allow left click for drag
@@ -196,6 +197,9 @@ export function ReactQueryDevtools({
     ...otherToggleButtonProps
   } = toggleButtonProps
 
+  // Do not render on the server
+  if (!isMounted()) return null
+
   return (
     <Container ref={rootRef} className="ReactQueryDevtools">
       <ThemeProvider theme={theme}>
@@ -428,12 +432,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
 
     return (
       <ThemeProvider theme={theme}>
-        <Panel
-          ref={ref}
-          className="ReactQueryDevtoolsPanel"
-          {...panelProps}
-          suppressHydrationWarning
-        >
+        <Panel ref={ref} className="ReactQueryDevtoolsPanel" {...panelProps}>
           <style
             dangerouslySetInnerHTML={{
               __html: `
@@ -505,44 +504,38 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
               >
                 <QueryKeys style={{ marginBottom: '.5rem' }}>
                   <QueryKey
-                    suppressHydrationWarning
                     style={{
                       background: theme.success,
                       opacity: hasFresh ? 1 : 0.3,
                     }}
                   >
-                    fresh <Code suppressHydrationWarning>({hasFresh})</Code>
+                    fresh <Code>({hasFresh})</Code>
                   </QueryKey>{' '}
                   <QueryKey
-                    suppressHydrationWarning
                     style={{
                       background: theme.active,
                       opacity: hasFetching ? 1 : 0.3,
                     }}
                   >
-                    fetching{' '}
-                    <Code suppressHydrationWarning>({hasFetching})</Code>
+                    fetching <Code>({hasFetching})</Code>
                   </QueryKey>{' '}
                   <QueryKey
-                    suppressHydrationWarning
                     style={{
                       background: theme.warning,
                       color: 'black',
                       textShadow: '0',
                       opacity: hasStale ? 1 : 0.3,
                     }}
                   >
-                    stale <Code suppressHydrationWarning>({hasStale})</Code>
+                    stale <Code>({hasStale})</Code>
                   </QueryKey>{' '}
                   <QueryKey
-                    suppressHydrationWarning
                     style={{
                       background: theme.gray,
                       opacity: hasInactive ? 1 : 0.3,
                     }}
                   >
-                    inactive{' '}
-                    <Code suppressHydrationWarning>({hasInactive})</Code>
+                    inactive <Code>({hasInactive})</Code>
                   </QueryKey>
                 </QueryKeys>
                 <div
@@ -597,15 +590,13 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
               </div>
             </div>
             <div
-              suppressHydrationWarning
               style={{
                 overflowY: 'auto',
                 flex: '1',
               }}
             >
               {queries.map((query, i) => (
                 <div
-                  suppressHydrationWarning
                   key={query.queryHash || i}
                   role="button"
                   aria-label={`Open query details for ${query.queryHash}`}
@@ -625,7 +616,6 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   }}
                 >
                   <div
-                    suppressHydrationWarning
                     style={{
                       flex: '0 0 auto',
                       width: '2rem',
@@ -649,7 +639,6 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                   </div>
                   {query.isActive() ? null : (
                     <div
-                      suppressHydrationWarning
                       style={{
                         flex: '0 0 auto',
                         height: '2rem',
@@ -664,7 +653,6 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                     </div>
                   )}
                   <Code
-                    suppressHydrationWarning
                     style={{
                       padding: '.5rem',
                     }}

src/devtools/utils.ts

@@ -58,7 +58,7 @@ export function styled(type, newStyles, queries = {}) {
   })
 }
 
-function useIsMounted() {
+export function useIsMounted() {
   const mountedRef = React.useRef(false)
   const isMounted = React.useCallback(() => mountedRef.current, [])