diff --git a/packages/html-reporter/src/index.tsx b/packages/html-reporter/src/index.tsx
index 3fedf4938a..d34aa2b640 100644
--- a/packages/html-reporter/src/index.tsx
+++ b/packages/html-reporter/src/index.tsx
@@ -19,7 +19,7 @@ import type zip from '@zip.js/zip.js';
 // @ts-ignore
 import * as zipImport from '@zip.js/zip.js/lib/zip-no-worker-inflate.js';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import './colors.css';
 import type { LoadedReport } from './loadedReport';
 import { ReportView } from './reportView';
@@ -44,7 +44,7 @@ const ReportLoader: React.FC = () => {
 };
 
 window.onload = () => {
-  ReactDOM.render(<ReportLoader />, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<ReportLoader />);
 };
 
 class ZipReport implements LoadedReport {
diff --git a/packages/recorder/src/index.tsx b/packages/recorder/src/index.tsx
index 9d55f8608a..5f1b579948 100644
--- a/packages/recorder/src/index.tsx
+++ b/packages/recorder/src/index.tsx
@@ -17,11 +17,11 @@
 import '@web/common.css';
 import { applyTheme } from '@web/theme';
 import '@web/third_party/vscode/codicon.css';
-import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Main } from './main';
 
 (async () => {
   applyTheme();
+  // we'd like to migrate this to React 18, but concurrent mode seems to break some of our tests.
   ReactDOM.render(<Main/>, document.querySelector('#root'));
 })();
diff --git a/packages/trace-viewer/src/embedded.tsx b/packages/trace-viewer/src/embedded.tsx
index c916d295c1..4f1503dcf2 100644
--- a/packages/trace-viewer/src/embedded.tsx
+++ b/packages/trace-viewer/src/embedded.tsx
@@ -17,7 +17,7 @@
 import '@web/common.css';
 import { applyTheme } from '@web/theme';
 import '@web/third_party/vscode/codicon.css';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { EmbeddedWorkbenchLoader } from './ui/embeddedWorkbenchLoader';
 
 (async () => {
@@ -56,5 +56,5 @@ import { EmbeddedWorkbenchLoader } from './ui/embeddedWorkbenchLoader';
     setInterval(function() { fetch('ping'); }, 10000);
   }
 
-  ReactDOM.render(<EmbeddedWorkbenchLoader />, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<EmbeddedWorkbenchLoader />);
 })();
diff --git a/packages/trace-viewer/src/index.tsx b/packages/trace-viewer/src/index.tsx
index 993b90a23d..a737d9017f 100644
--- a/packages/trace-viewer/src/index.tsx
+++ b/packages/trace-viewer/src/index.tsx
@@ -17,7 +17,7 @@
 import '@web/common.css';
 import { applyTheme } from '@web/theme';
 import '@web/third_party/vscode/codicon.css';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { WorkbenchLoader } from './ui/workbenchLoader';
 
 (async () => {
@@ -38,5 +38,5 @@ import { WorkbenchLoader } from './ui/workbenchLoader';
     setInterval(function() { fetch('ping'); }, 10000);
   }
 
-  ReactDOM.render(<WorkbenchLoader/>, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<WorkbenchLoader/>);
 })();
diff --git a/packages/trace-viewer/src/uiMode.tsx b/packages/trace-viewer/src/uiMode.tsx
index f2f846a112..5dac2082e8 100644
--- a/packages/trace-viewer/src/uiMode.tsx
+++ b/packages/trace-viewer/src/uiMode.tsx
@@ -17,7 +17,7 @@
 import '@web/common.css';
 import { applyTheme } from '@web/theme';
 import '@web/third_party/vscode/codicon.css';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { UIModeView } from './ui/uiModeView';
 
 (async () => {
@@ -38,5 +38,5 @@ import { UIModeView } from './ui/uiModeView';
     setInterval(function() { fetch('ping'); }, 10000);
   }
 
-  ReactDOM.render(<UIModeView></UIModeView>, document.querySelector('#root'));
+  ReactDOM.createRoot(document.querySelector('#root')!).render(<UIModeView/>);
 })();