diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index d0ee3d7060..150e2f431f 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -321,10 +321,9 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
   createEffect(() => {
     const rootContainer = panelRef.parentElement?.parentElement?.parentElement
     if (!rootContainer) return
-    const styleProp = getSidedProp(
-      'padding',
-      props.localStore.position as DevtoolsPosition,
-    )
+    const currentPosition = (props.localStore.position ||
+      POSITION) as DevtoolsPosition
+    const styleProp = getSidedProp('padding', currentPosition)
     const isVertical =
       props.localStore.position === 'left' ||
       props.localStore.position === 'right'
diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index 551635e620..6531da9ecb 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/packages/react-query-devtools/src/devtools.tsx
@@ -37,7 +37,7 @@ export interface DevtoolsOptions {
   errorTypes?: DevToolsErrorType[]
 }
 
-export function ReactQueryDevtools(
+function ReactQueryDevtoolsDev(
   props: DevtoolsOptions,
 ): React.ReactElement | null {
   const queryClient = useQueryClient()
@@ -93,3 +93,14 @@ export function ReactQueryDevtools(
 
   return <div ref={ref}></div>
 }
+
+function ReactQueryDevtoolsProd(
+  _props: DevtoolsOptions,
+): React.ReactElement | null {
+  return null
+}
+
+export const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =
+  process.env.NODE_ENV !== 'development'
+    ? ReactQueryDevtoolsProd
+    : ReactQueryDevtoolsDev