Use createRoot on benchmarks

Mojang · Nov 14, 2023 · d87e4ed · d87e4ed
1 parent 8b542ed
commit d87e4ed
Show file tree

Hide file tree

Showing 15 changed files with 96 additions and 36 deletions.
diff --git a/examples/benchmarking/src/listMemoFacet.tsx b/examples/benchmarking/src/listMemoFacet.tsx
@@ -1,5 +1,5 @@
 import { useFacetState, Facet, useFacetMap, useFacetEffect, NO_VALUE, Map } from '@react-facet/core'
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import React, { useEffect } from 'react'
 
 interface Data {
@@ -103,4 +103,8 @@ const dataEqualityCheck = () => {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/listMemoState.tsx b/examples/benchmarking/src/listMemoState.tsx
@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState, memo } from 'react'
 
 interface Data {
@@ -65,4 +65,8 @@ const ListItem = memo(({ health, name }: Data) => {
 const randomWork = (name: string | number) => Math.random()
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/markerFacet.tsx b/examples/benchmarking/src/markerFacet.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState, Facet, useFacetMap, NO_VALUE, Map } from '@react-facet/core'
 import { times } from 'ramda'
 
@@ -63,4 +63,8 @@ function Performance() {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/markerFacetNumber.tsx b/examples/benchmarking/src/markerFacetNumber.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState, Facet, useFacetMap, NO_VALUE, Map } from '@react-facet/core'
 import { times } from 'ramda'
 
@@ -63,4 +63,8 @@ function Performance() {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/markerState.tsx b/examples/benchmarking/src/markerState.tsx
@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState } from 'react'
 import { times } from 'ramda'
 
@@ -61,4 +61,8 @@ function Performance() {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/mountFacetDomFiber.tsx b/examples/benchmarking/src/mountFacetDomFiber.tsx
@@ -1,4 +1,4 @@
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { times } from 'ramda'
 import React, { useEffect, useState } from 'react'
 
@@ -54,4 +54,8 @@ const ComplexComponent = ({ value }: { value: number }) => {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/mountReactDom.tsx b/examples/benchmarking/src/mountReactDom.tsx
@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { times } from 'ramda'
 import React, { useEffect, useState } from 'react'
 
@@ -54,4 +54,8 @@ const ComplexComponent = ({ value }: { value: number }) => {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/overheadFacet.tsx b/examples/benchmarking/src/overheadFacet.tsx
@@ -1,4 +1,4 @@
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState, useFacetEffect } from '@react-facet/core'
 import React, { useEffect } from 'react'
 
@@ -31,5 +31,9 @@ function Performance() {
   return null
 }
 
-document.body.innerHTML = `<div id="root"></div>`
-render(<Performance />, document.getElementById('root'))
+document.body.innerHTML = '<div id="root"/>'
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/overheadState.tsx b/examples/benchmarking/src/overheadState.tsx
@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState } from 'react'
 
 function Performance() {
@@ -26,5 +26,9 @@ function Performance() {
   return null
 }
 
-document.body.innerHTML = `<div id="root"></div>`
-render(<Performance />, document.getElementById('root'))
+document.body.innerHTML = '<div id="root"/>'
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/progressBarFacet.tsx b/examples/benchmarking/src/progressBarFacet.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { useFacetMap, Facet, useFacetState } from '@react-facet/core'
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 
 const ProgressBar = ({ progress }: { progress: Facet<number> }) => {
   const width = useFacetMap((progress) => `${progress * 20}px`, [], [progress])
@@ -18,7 +18,7 @@ const ProgressBar = ({ progress }: { progress: Facet<number> }) => {
   )
 }
 
-const App = () => {
+const Performance = () => {
   const [progress, setProgress] = useFacetState(0)
 
   useEffect(() => {
@@ -39,5 +39,9 @@ const App = () => {
   return <ProgressBar progress={progress} />
 }
 
-document.body.innerHTML = `<div id="root"></div>`
-render(<App />, document.getElementById('root'))
+document.body.innerHTML = '<div id="root"/>'
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/progressBarState.tsx b/examples/benchmarking/src/progressBarState.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 const ProgressBar = ({ progress }: { progress: number }) => {
   const width = `${progress * 20}px`
@@ -17,7 +17,7 @@ const ProgressBar = ({ progress }: { progress: number }) => {
   )
 }
 
-const App = () => {
+const Performance = () => {
   const [progress, setProgress] = useState(0)
 
   useEffect(() => {
@@ -38,5 +38,9 @@ const App = () => {
   return <ProgressBar progress={progress} />
 }
 
-document.body.innerHTML = `<div id="root"></div>`
-render(<App />, document.getElementById('root'))
+document.body.innerHTML = '<div id="root"/>'
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/toggleRealisticClassFacet.tsx b/examples/benchmarking/src/toggleRealisticClassFacet.tsx
@@ -1,4 +1,4 @@
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState } from '@react-facet/core'
 import React, { useEffect } from 'react'
 
@@ -59,4 +59,8 @@ document.body.innerHTML = `
 </style>
 `
 
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/toggleRealisticClassState.tsx b/examples/benchmarking/src/toggleRealisticClassState.tsx
@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState } from 'react'
 
 function Performance() {
@@ -58,4 +58,8 @@ document.body.innerHTML = `
 </style>
 `
 
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/toggleSimpleClassFacet.tsx b/examples/benchmarking/src/toggleSimpleClassFacet.tsx
@@ -1,4 +1,4 @@
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState } from '@react-facet/core'
 import React, { useEffect } from 'react'
 
@@ -37,4 +37,8 @@ document.body.innerHTML = `
 </style>
 `
 
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}
diff --git a/examples/benchmarking/src/toggleSimpleClassState.tsx b/examples/benchmarking/src/toggleSimpleClassState.tsx
@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState } from 'react'
 
 function Performance() {
@@ -36,4 +36,8 @@ document.body.innerHTML = `
 </style>
 `
 
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element != null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}