diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index aefc8d5e078bc..01d4c9104b025 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -10,6 +10,8 @@
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
+import {getVersionedRenderImplementation} from './utils';
+
 describe('ProfilingCache', () => {
   let PropTypes;
   let React;
@@ -39,8 +41,11 @@ describe('ProfilingCache', () => {
     Scheduler = require('scheduler');
   });
 
+  const {render, getContainer} = getVersionedRenderImplementation();
+
   // @reactVersion >= 16.9
-  it('should collect data for each root (including ones added or mounted after profiling started)', () => {
+  // @reactVersion < 19
+  it('should collect data for each root (including ones added or mounted after profiling started) (legacy render)', () => {
     const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
@@ -151,6 +156,116 @@ describe('ProfilingCache', () => {
     });
   });
 
+  // @reactVersion >= 18
+  it('should collect data for each root (including ones added or mounted after profiling started) (createRoot)', () => {
+    const Parent = ({count}) => {
+      Scheduler.unstable_advanceTime(10);
+      const children = new Array(count)
+        .fill(true)
+        .map((_, index) => <Child key={index} duration={index} />);
+      return (
+        <React.Fragment>
+          {children}
+          <MemoizedChild duration={1} />
+        </React.Fragment>
+      );
+    };
+    const Child = ({duration}) => {
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
+    const MemoizedChild = React.memo(Child);
+
+    const RootA = ({children}) => children;
+    const RootB = ({children}) => children;
+    const RootC = ({children}) => children;
+
+    const containerA = document.createElement('div');
+    const containerB = document.createElement('div');
+    const containerC = document.createElement('div');
+
+    const rootA = ReactDOMClient.createRoot(containerA);
+    const rootB = ReactDOMClient.createRoot(containerB);
+    const rootC = ReactDOMClient.createRoot(containerC);
+
+    utils.act(() =>
+      rootA.render(
+        <RootA>
+          <Parent count={2} />
+        </RootA>,
+      ),
+    );
+    utils.act(() =>
+      rootB.render(
+        <RootB>
+          <Parent count={1} />
+        </RootB>,
+      ),
+    );
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      rootA.render(
+        <RootA>
+          <Parent count={3} />
+        </RootA>,
+      ),
+    );
+    utils.act(() =>
+      rootC.render(
+        <RootC>
+          <Parent count={1} />
+        </RootC>,
+      ),
+    );
+    utils.act(() =>
+      rootA.render(
+        <RootA>
+          <Parent count={1} />
+        </RootA>,
+      ),
+    );
+    utils.act(() => rootB.unmount());
+    utils.act(() =>
+      rootA.render(
+        <RootA>
+          <Parent count={0} />
+        </RootA>,
+      ),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+    utils.act(() => rootA.unmount());
+
+    const rootIDs = Array.from(
+      store.profilerStore.profilingData.dataForRoots.values(),
+    ).map(({rootID}) => rootID);
+    expect(rootIDs).toHaveLength(3);
+
+    const originalProfilingDataForRoot = [];
+
+    let data = store.profilerStore.getDataForRoot(rootIDs[0]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootA"`);
+    expect(data.commitData).toHaveLength(3);
+    originalProfilingDataForRoot.push(data);
+
+    data = store.profilerStore.getDataForRoot(rootIDs[1]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootC"`);
+    expect(data.commitData).toHaveLength(1);
+    originalProfilingDataForRoot.push(data);
+
+    data = store.profilerStore.getDataForRoot(rootIDs[2]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootB"`);
+    expect(data.commitData).toHaveLength(1);
+    originalProfilingDataForRoot.push(data);
+
+    utils.exportImportHelper(bridge, store);
+
+    rootIDs.forEach((rootID, index) => {
+      const current = store.profilerStore.getDataForRoot(rootID);
+      const prev = originalProfilingDataForRoot[index];
+      expect(current).toEqual(prev);
+    });
+  });
+
   // @reactVersion >= 16.9
   it('should collect data for each commit', () => {
     const Parent = ({count}) => {
@@ -171,13 +286,11 @@ describe('ProfilingCache', () => {
     };
     const MemoizedChild = React.memo(Child);
 
-    const container = document.createElement('div');
-
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => legacyRender(<Parent count={2} />, container));
-    utils.act(() => legacyRender(<Parent count={3} />, container));
-    utils.act(() => legacyRender(<Parent count={1} />, container));
-    utils.act(() => legacyRender(<Parent count={0} />, container));
+    utils.act(() => render(<Parent count={2} />));
+    utils.act(() => render(<Parent count={3} />));
+    utils.act(() => render(<Parent count={1} />));
+    utils.act(() => render(<Parent count={0} />));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const rootID = store.roots[0];
@@ -244,19 +357,13 @@ describe('ProfilingCache', () => {
       }
     }
 
-    const container = document.createElement('div');
-
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => legacyRender(<LegacyContextProvider />, container));
+    utils.act(() => render(<LegacyContextProvider />));
     expect(instance).not.toBeNull();
     utils.act(() => (instance: any).setState({count: 1}));
-    utils.act(() =>
-      legacyRender(<LegacyContextProvider foo={123} />, container),
-    );
-    utils.act(() =>
-      legacyRender(<LegacyContextProvider bar="abc" />, container),
-    );
-    utils.act(() => legacyRender(<LegacyContextProvider />, container));
+    utils.act(() => render(<LegacyContextProvider foo={123} />));
+    utils.act(() => render(<LegacyContextProvider bar="abc" />));
+    utils.act(() => render(<LegacyContextProvider />));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const rootID = store.roots[0];
@@ -574,25 +681,21 @@ describe('ProfilingCache', () => {
       return null;
     };
 
-    const container = document.createElement('div');
-
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
-      legacyRender(
+      render(
         <Context.Provider value={true}>
           <Component count={1} />
         </Context.Provider>,
-        container,
       ),
     );
 
     // Second render has no changed hooks, only changed props.
     utils.act(() =>
-      legacyRender(
+      render(
         <Context.Provider value={true}>
           <Component count={2} />
         </Context.Provider>,
-        container,
       ),
     );
 
@@ -604,11 +707,10 @@ describe('ProfilingCache', () => {
 
     // Fifth render has a changed context value, but no changed hook.
     utils.act(() =>
-      legacyRender(
+      render(
         <Context.Provider value={false}>
           <Component count={2} />
         </Context.Provider>,
-        container,
       ),
     );
 
@@ -754,9 +856,7 @@ describe('ProfilingCache', () => {
     };
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() =>
-      legacyRender(<Grandparent />, document.createElement('div')),
-    );
+    utils.act(() => render(<Grandparent />));
     utils.act(() => store.profilerStore.stopProfiling());
 
     expect(store).toMatchInlineSnapshot(`
@@ -822,9 +922,7 @@ describe('ProfilingCache', () => {
     };
 
     utils.act(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() =>
-      legacyRender(<Parent />, document.createElement('div')),
-    );
+    await utils.actAsync(() => render(<Parent />));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const rootID = store.roots[0];
@@ -880,12 +978,10 @@ describe('ProfilingCache', () => {
     };
     const MemoizedChild = React.memo(Child);
 
-    const container = document.createElement('div');
-
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => legacyRender(<Parent count={1} />, container));
-    utils.act(() => legacyRender(<Parent count={2} />, container));
-    utils.act(() => legacyRender(<Parent count={3} />, container));
+    utils.act(() => render(<Parent count={1} />));
+    utils.act(() => render(<Parent count={2} />));
+    utils.act(() => render(<Parent count={3} />));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const rootID = store.roots[0];
@@ -941,10 +1037,8 @@ describe('ProfilingCache', () => {
   // @reactVersion >= 18.0.0
   // @reactVersion <= 18.2.0
   it('should handle unexpectedly shallow suspense trees for react v[18.0.0 - 18.2.0]', () => {
-    const container = document.createElement('div');
-
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => legacyRender(<React.Suspense />, container));
+    utils.act(() => render(<React.Suspense />));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const rootID = store.roots[0];
@@ -969,7 +1063,7 @@ describe('ProfilingCache', () => {
           "updaters": [
             {
               "compiledWithForget": false,
-              "displayName": "render()",
+              "displayName": "createRoot()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -981,13 +1075,10 @@ describe('ProfilingCache', () => {
     `);
   });
 
-  // This test is not gated.
-  // For this test we use the current version of react, built from source.
+  // @reactVersion > 18.2.0
   it('should handle unexpectedly shallow suspense trees', () => {
-    const container = document.createElement('div');
-
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => legacyRender(<React.Suspense />, container));
+    utils.act(() => render(<React.Suspense />));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const rootID = store.roots[0];
@@ -1012,7 +1103,7 @@ describe('ProfilingCache', () => {
           "updaters": [
             {
               "compiledWithForget": false,
-              "displayName": "render()",
+              "displayName": "createRoot()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1105,13 +1196,12 @@ describe('ProfilingCache', () => {
 
     const {Simulate} = require('react-dom/test-utils');
 
-    const container = document.createElement('div');
-    utils.act(() => legacyRender(<App />, container));
-    expect(container.textContent).toBe('Home');
+    utils.act(() => render(<App />));
+    expect(getContainer().textContent).toBe('Home');
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => Simulate.click(linkRef.current));
     utils.act(() => store.profilerStore.stopProfiling());
-    expect(container.textContent).toBe('About');
+    expect(getContainer().textContent).toBe('About');
   });
 
   // @reactVersion >= 18.0