feat(gatsby): swap createRoot to new hydrateRoot (#32181)

Author: wardpeet

packages/gatsby/cache-dir/app.js

@@ -134,8 +134,8 @@ apiRunnerAsync(`onClientEntry`).then(() => {
   // render to avoid React complaining about hydration mis-matches.
   let defaultRenderer = ReactDOM.render
   if (focusEl && focusEl.children.length) {
-    if (ReactDOM.createRoot) {
-      defaultRenderer = ReactDOM.createRoot
+    if (ReactDOM.hydrateRoot) {
+      defaultRenderer = ReactDOM.hydrateRoot
     } else {
       defaultRenderer = ReactDOM.hydrate
     }
@@ -193,7 +193,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
         )
         document.body.append(indicatorMountElement)
 
-        if (renderer === ReactDOM.createRoot) {
+        if (renderer === ReactDOM.hydrateRoot) {
           renderer(indicatorMountElement).render(
             <LoadingIndicatorEventHandler />
           )
@@ -225,10 +225,8 @@ apiRunnerAsync(`onClientEntry`).then(() => {
         dismissLoadingIndicator()
       }
 
-      if (renderer === ReactDOM.createRoot) {
-        renderer(rootElement, {
-          hydrate: true,
-        }).render(<App />)
+      if (renderer === ReactDOM.hydrateRoot) {
+        renderer(rootElement, <App />)
       } else {
         renderer(<App />, rootElement)
       }

packages/gatsby/cache-dir/production-app.js

@@ -192,7 +192,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
     const renderer = apiRunner(
       `replaceHydrateFunction`,
       undefined,
-      ReactDOM.createRoot ? ReactDOM.createRoot : ReactDOM.hydrate
+      ReactDOM.hydrateRoot ? ReactDOM.hydrateRoot : ReactDOM.hydrate
     )[0]
 
     function runRender() {
@@ -201,10 +201,8 @@ apiRunnerAsync(`onClientEntry`).then(() => {
           ? document.getElementById(`___gatsby`)
           : null
 
-      if (renderer === ReactDOM.createRoot) {
-        renderer(rootElement, {
-          hydrate: true,
-        }).render(<App />)
+      if (renderer === ReactDOM.hydrateRoot) {
+        renderer(rootElement, <App />)
       } else {
         renderer(<App />, rootElement)
       }