From 318471d547faf17013890b373dd08968e438591a Mon Sep 17 00:00:00 2001
From: Sanjaiyan Parthipan <parthipankalayini@gmail.com>
Date: Sun, 31 Jul 2022 13:31:31 +0530
Subject: [PATCH] =?UTF-8?q?Adding=20incremental=20support=20for=20React=20?=
 =?UTF-8?q?18=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docusaurus/package.json              |  4 +-
 .../docusaurus/src/client/clientEntry.tsx     | 78 ++++++++++++++-----
 2 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json
index 965856e2f702..6ee458d4e5b7 100644
--- a/packages/docusaurus/package.json
+++ b/packages/docusaurus/package.json
@@ -121,8 +121,8 @@
     "tree-node-cli": "^1.5.2"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^16.8.4 || ^17.0.0 || ^18.0.0-0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0-0"
   },
   "engines": {
     "node": ">=16.14"
diff --git a/packages/docusaurus/src/client/clientEntry.tsx b/packages/docusaurus/src/client/clientEntry.tsx
index 8e53d92e1021..4b61ba61b6cf 100644
--- a/packages/docusaurus/src/client/clientEntry.tsx
+++ b/packages/docusaurus/src/client/clientEntry.tsx
@@ -5,19 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {BrowserRouter} from 'react-router-dom';
-import {HelmetProvider} from 'react-helmet-async';
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { HelmetProvider } from "react-helmet-async";
 
-import ExecutionEnvironment from './exports/ExecutionEnvironment';
-import App from './App';
-import preload from './preload';
-import docusaurus from './docusaurus';
+import ExecutionEnvironment from "./exports/ExecutionEnvironment";
+import App from "./App";
+import preload from "./preload";
+import docusaurus from "./docusaurus";
 
 declare global {
   interface NodeModule {
-    hot?: {accept: () => void};
+    hot?: { accept: () => void };
   }
 }
 
@@ -29,18 +28,55 @@ if (ExecutionEnvironment.canUseDOM) {
   // first-load experience.
   // For development, there is no existing markup so we had to render it.
   // We also preload async component to avoid first-load loading screen.
-  const renderMethod =
-    process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render;
-  preload(window.location.pathname).then(() => {
-    renderMethod(
-      <HelmetProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </HelmetProvider>,
-      document.getElementById('__docusaurus'),
-    );
-  });
+
+  if (React.version.includes("18.")) {
+    if (process.env.NODE_ENV === "production") {
+      const { hydrateRoot } = require("react-dom/client");
+
+      preload(window.location.pathname).then(() => {
+        hydrateRoot(
+          document.getElementById("__docusaurus"),
+          <HelmetProvider>
+            <BrowserRouter>
+              <App />
+            </BrowserRouter>
+          </HelmetProvider>
+        );
+      });
+    } else {
+      const { createRoot } = require("react-dom/client");
+
+      preload(window.location.pathname).then(() => {
+        const docReactRoot = createRoot(
+          document.getElementById("__docusaurus")
+        );
+
+        docReactRoot.render(
+          <HelmetProvider>
+            <BrowserRouter>
+              <App />
+            </BrowserRouter>
+          </HelmetProvider>
+        );
+      });
+    }
+  } else {
+    const ReactDOM = require("react-dom");
+    const renderMethod =
+      process.env.NODE_ENV === "production"
+        ? ReactDOM.hydrate
+        : ReactDOM.render;
+    preload(window.location.pathname).then(() => {
+      renderMethod(
+        <HelmetProvider>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </HelmetProvider>,
+        document.getElementById("__docusaurus")
+      );
+    });
+  }
 
   // Webpack Hot Module Replacement API
   if (module.hot) {