From 7b087c3a529a3c872fdce789434b98b361a8eec7 Mon Sep 17 00:00:00 2001
From: Adnan AlBeda <adnan.albeda@outlook.com>
Date: Wed, 25 May 2022 16:57:34 +0300
Subject: [PATCH] Fix React Template For HMR Break With Context

When using `createContext` and wrap elements with `context.provided`, hmr breaks and the context tries to access disposed object.

This code avoid the problem by creating one react root per model, and it makes loading page faster too.
---
 .../create-vite/template-react-ts/src/main.tsx  | 17 ++++++++++++-----
 .../create-vite/template-react/src/main.jsx     | 17 ++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/create-vite/template-react-ts/src/main.tsx b/packages/create-vite/template-react-ts/src/main.tsx
index 611e848f1a3e9c..2f01f6e7d7da51 100644
--- a/packages/create-vite/template-react-ts/src/main.tsx
+++ b/packages/create-vite/template-react-ts/src/main.tsx
@@ -3,8 +3,15 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+let rootElement: HTMLElement | null;
+
+document.addEventListener("DOMContentLoaded", () => {
+  if (!rootElement) {
+    rootElement = document.getElementById("root");
+    ReactDOM.createRoot(rootElement as HTMLElement).render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    );
+  }
+});
diff --git a/packages/create-vite/template-react/src/main.jsx b/packages/create-vite/template-react/src/main.jsx
index 9af0bb638e42c0..5224acbc26006e 100644
--- a/packages/create-vite/template-react/src/main.jsx
+++ b/packages/create-vite/template-react/src/main.jsx
@@ -3,8 +3,15 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+let rootElement;
+
+document.addEventListener("DOMContentLoaded", function () {
+  if (!rootElement) {
+    rootElement = document.getElementById("root");
+    ReactDOM.createRoot(rootElement).render(
+      <React.StrictMode>
+            <App />
+      </React.StrictMode>
+    );
+  }
+});