fix(Leva): disable dev warning (#399)

.changeset/stupid-walls-tap.md

@@ -0,0 +1,5 @@
+---
+'leva': patch
+---
+
+fix(Leva): disable dev warning

packages/leva/src/components/Leva/Leva.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
-import ReactDOM from 'react-dom'
 import { levaStore } from '../../store'
 import { LevaRoot, LevaRootProps } from './LevaRoot'
+import { render } from '../../utils/react'
 
 let rootInitialized = false
 let rootEl: HTMLElement | null = null
@@ -40,7 +40,7 @@ export function useRenderRoot(isGlobalPanel: boolean) {
           document.getElementById('leva__root') || Object.assign(document.createElement('div'), { id: 'leva__root' })
         if (document.body) {
           document.body.appendChild(rootEl)
-          ReactDOM.render(<Leva isRoot />, rootEl)
+          render(<Leva isRoot />, rootEl)
         }
       }
       rootInitialized = true

packages/leva/src/utils/react.ts

@@ -1,4 +1,20 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * With React 18, renderers will warn when not using the new createRoot signature to opt-in to concurrent mode.
+ * We're okay with creating a (blocking) legacy root to support older versions, so we disable the warning.
+ * @see https://github.com/facebook/react/pull/21652
+ */
+export function render<P>(element: React.ReactElement<P>, container: HTMLElement): void {
+  // eslint-disable-next-line no-console
+  const error = console.error
+  // eslint-disable-next-line no-console
+  console.error = () => {}
+  ReactDOM.render(element, container)
+  // eslint-disable-next-line no-console
+  console.error = error
+}
 
 /*
  * https://github.com/gregberge/react-merge-refs