devtools: Display actual ReactDOM API name in root type

facebook · Sep 20, 2021 · c14a584 · c14a584
1 parent ea5c55a
commit c14a584
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 15 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -176,7 +176,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
-        "rootType": "createLegacyRoot()",
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1585,7 +1585,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
-        "rootType": "createLegacyRoot()",
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1914,7 +1914,7 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
-        "rootType": "createLegacyRoot()",
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1947,7 +1947,7 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
-        "rootType": "createLegacyRoot()",
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1968,9 +1968,7 @@ describe('InspectedElement', () => {
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
-    expect(inspectedElement.rootType).toMatchInlineSnapshot(
-      `"createLegacyRoot()"`,
-    );
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrate()"`);
   });
 
   it('should display the root type for ReactDOM.render', async () => {
@@ -1982,9 +1980,7 @@ describe('InspectedElement', () => {
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
-    expect(inspectedElement.rootType).toMatchInlineSnapshot(
-      `"createLegacyRoot()"`,
-    );
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
   });
 
   it('should display the root type for ReactDOM.hydrateRoot', async () => {
@@ -1997,7 +1993,7 @@ describe('InspectedElement', () => {
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
-    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
   });
 
   it('should display the root type for ReactDOM.createRoot', async () => {

diff --git 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
@@ -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;
     }
   }