Update templates to use React 18 createRoot (#12220)

facebook · Apr 8, 2022 · 2eef1d0 · 2eef1d0
1 parent 213b6a2
commit 2eef1d0
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json
@@ -6,8 +6,8 @@
       "@testing-library/user-event": "^13.2.1",
       "@types/jest": "^27.0.1",
       "@types/node": "^16.7.13",
-      "@types/react": "^17.0.20",
-      "@types/react-dom": "^17.0.9",
+      "@types/react": "^18.0.0",
+      "@types/react-dom": "^18.0.0",
       "typescript": "^4.4.2",
       "web-vitals": "^2.1.0"
     },

diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx
@@ -1,14 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
@@ -77,8 +77,8 @@
     "workbox-webpack-plugin": "^6.4.1"
   },
   "devDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "optionalDependencies": {
     "fsevents": "^2.3.2"