diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 4586e34e32e13..eb196e76b480a 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -176,6 +176,7 @@ describe('InspectedElement', () => {
"a": 1,
"b": "abc",
},
+ "rootType": "render()",
"state": null,
}
`);
@@ -1584,6 +1585,7 @@ describe('InspectedElement', () => {
"a": 1,
"b": "abc",
},
+ "rootType": "render()",
"state": null,
}
`);
@@ -1912,6 +1914,7 @@ describe('InspectedElement', () => {
"id": 2,
"owners": null,
"props": Object {},
+ "rootType": "render()",
"state": null,
}
`);
@@ -1944,11 +1947,67 @@ describe('InspectedElement', () => {
"id": 2,
"owners": null,
"props": Object {},
+ "rootType": "render()",
"state": null,
}
`);
});
+ it('should display the root type for ReactDOM.hydrate', async () => {
+ const Example = () =>
;
+
+ await utils.actAsync(() => {
+ const container = document.createElement('div');
+ container.innerHTML = '';
+ withErrorsOrWarningsIgnored(
+ ['ReactDOM.hydrate is no longer supported in React 18'],
+ () => {
+ ReactDOM.hydrate(, container);
+ },
+ );
+ }, false);
+
+ const inspectedElement = await inspectElementAtIndex(0);
+ expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrate()"`);
+ });
+
+ it('should display the root type for ReactDOM.render', async () => {
+ const Example = () => ;
+
+ await utils.actAsync(() => {
+ const container = document.createElement('div');
+ legacyRender(, container);
+ }, false);
+
+ const inspectedElement = await inspectElementAtIndex(0);
+ expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
+ });
+
+ it('should display the root type for ReactDOM.hydrateRoot', async () => {
+ const Example = () => ;
+
+ await utils.actAsync(() => {
+ const container = document.createElement('div');
+ container.innerHTML = '';
+ ReactDOM.hydrateRoot(container).render();
+ }, false);
+
+ const inspectedElement = await inspectElementAtIndex(0);
+ expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
+ });
+
+ it('should display the root type for ReactDOM.createRoot', async () => {
+ const Example = () => ;
+
+ await utils.actAsync(() => {
+ const container = document.createElement('div');
+ ReactDOM.createRoot(container).render();
+ }, false);
+
+ const inspectedElement = await inspectElementAtIndex(0);
+ expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
+ });
+
describe('$r', () => {
it('should support function components', async () => {
const Example = () => {
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
index 4721a29722f0d..0c249ca5b939a 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
@@ -30,6 +30,7 @@ export function print(inspectedElement, serialize, indent) {
id: inspectedElement.id,
owners: inspectedElement.owners,
props: inspectedElement.props,
+ rootType: inspectedElement.rootType,
state: inspectedElement.state,
});
}
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 3afab2f38feeb..6e8016c3f4a13 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -83,6 +83,7 @@ describe('InspectedElementContext', () => {
"a": 1,
"b": "abc",
},
+ "rootType": null,
"state": null,
}
`);
@@ -133,6 +134,7 @@ describe('InspectedElementContext', () => {
"value_null": null,
"value_undefined": undefined,
},
+ "rootType": null,
"state": null,
}
`);
@@ -408,6 +410,7 @@ describe('InspectedElementContext', () => {
"preview_long": Generator,
},
},
+ "rootType": null,
"state": null,
}
`);
@@ -461,6 +464,7 @@ describe('InspectedElementContext', () => {
"number": 42,
},
},
+ "rootType": null,
"state": null,
}
`);
@@ -552,6 +556,7 @@ describe('InspectedElementContext', () => {
"enumerableStringBase": 1,
},
},
+ "rootType": null,
"state": null,
}
`);
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index d69d2d77e5dfa..90a1809e43873 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -83,10 +83,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
if (__DEV__) {
switch (tag) {
case ConcurrentRoot:
- this._debugRootType = 'createRoot()';
+ this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
break;
case LegacyRoot:
- this._debugRootType = 'createLegacyRoot()';
+ this._debugRootType = hydrate ? 'hydrate()' : 'render()';
break;
}
}
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 8469d6c85b506..dc1ec23ae1597 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -83,10 +83,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
if (__DEV__) {
switch (tag) {
case ConcurrentRoot:
- this._debugRootType = 'createRoot()';
+ this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
break;
case LegacyRoot:
- this._debugRootType = 'createLegacyRoot()';
+ this._debugRootType = hydrate ? 'hydrate()' : 'render()';
break;
}
}