fix(react-query-devtools): always useEffect for the mounted check

no effect runs on the server, and there is no real advantage to useLayoutEffect on the client; somehow, this dynamic check creates problems with the production build of the devtools

Author: TkDodo

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

@@ -99,8 +99,6 @@ interface DevtoolsPanelOptions extends ContextOptions {
   handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
-const isServer = typeof window === 'undefined'
-
 export function ReactQueryDevtools({
   initialIsOpen,
   panelProps = {},
@@ -192,7 +190,7 @@ export function ReactQueryDevtools({
     }
   }, [isResolvedOpen])
 
-  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+  React.useEffect(() => {
     if (isResolvedOpen) {
       const previousValue = rootRef.current?.parentElement?.style.paddingBottom
 

packages/react-query-devtools/src/utils.ts

@@ -4,8 +4,6 @@ import type { Query } from '@tanstack/react-query'
 import { Theme, useTheme } from './theme'
 import useMediaQuery from './useMediaQuery'
 
-export const isServer = typeof window === 'undefined'
-
 type StyledComponent<T> = T extends 'button'
   ? React.DetailedHTMLProps<
       React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -104,7 +102,7 @@ export function useIsMounted() {
   const mountedRef = React.useRef(false)
   const isMounted = React.useCallback(() => mountedRef.current, [])
 
-  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+  React.useEffect(() => {
     mountedRef.current = true
     return () => {
       mountedRef.current = false