devtools: Remove ForwardRef/Memo from display name if displayName i…

…s set (#21952) * feat(devtools): Remove ForwardRef/Memo from display name if `displayName` is set * Avoid potentially wasting work by inlining `functionName`
facebook · Oct 6, 2022 · 32cdce2 · 32cdce2
1 parent 6b1f8ca
commit 32cdce2
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 43 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -125,8 +125,8 @@ describe('profiling charts', () => {
               "actualDuration": 0,
               "didRender": true,
               "id": 5,
-              "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)",
+              "name": "Memo(Child)",
               "offset": 15,
               "selfDuration": 0,
               "treeBaseDuration": 0,
@@ -135,8 +135,8 @@ describe('profiling charts', () => {
               "actualDuration": 2,
               "didRender": true,
               "id": 4,
-              "label": "Child key=\\"second\\" (2ms of 2ms)",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)",
+              "name": "Memo(Child)",
               "offset": 13,
               "selfDuration": 2,
               "treeBaseDuration": 2,
@@ -145,8 +145,8 @@ describe('profiling charts', () => {
               "actualDuration": 3,
               "didRender": true,
               "id": 3,
-              "label": "Child key=\\"first\\" (3ms of 3ms)",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"first\\" (3ms of 3ms)",
+              "name": "Memo(Child)",
               "offset": 10,
               "selfDuration": 3,
               "treeBaseDuration": 3,
@@ -176,8 +176,8 @@ describe('profiling charts', () => {
               "actualDuration": 0,
               "didRender": false,
               "id": 5,
-              "label": "Child key=\\"third\\"",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"third\\"",
+              "name": "Memo(Child)",
               "offset": 15,
               "selfDuration": 0,
               "treeBaseDuration": 0,
@@ -186,8 +186,8 @@ describe('profiling charts', () => {
               "actualDuration": 0,
               "didRender": false,
               "id": 4,
-              "label": "Child key=\\"second\\"",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"second\\"",
+              "name": "Memo(Child)",
               "offset": 13,
               "selfDuration": 0,
               "treeBaseDuration": 2,
@@ -196,8 +196,8 @@ describe('profiling charts', () => {
               "actualDuration": 0,
               "didRender": false,
               "id": 3,
-              "label": "Child key=\\"first\\"",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"first\\"",
+              "name": "Memo(Child)",
               "offset": 10,
               "selfDuration": 0,
               "treeBaseDuration": 3,
@@ -267,20 +267,20 @@ describe('profiling charts', () => {
           },
           Object {
             "id": 3,
-            "label": "Child (Memo) key=\\"first\\" (3ms)",
-            "name": "Child",
+            "label": "Memo(Child) (Memo) key=\\"first\\" (3ms)",
+            "name": "Memo(Child)",
             "value": 3,
           },
           Object {
             "id": 4,
-            "label": "Child (Memo) key=\\"second\\" (2ms)",
-            "name": "Child",
+            "label": "Memo(Child) (Memo) key=\\"second\\" (2ms)",
+            "name": "Memo(Child)",
             "value": 2,
           },
           Object {
             "id": 5,
-            "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
-            "name": "Child",
+            "label": "Memo(Child) (Memo) key=\\"third\\" (<0.1ms)",
+            "name": "Memo(Child)",
             "value": 0,
           },
         ]

diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -1507,16 +1507,16 @@ describe('Store', () => {
             <MyComponent> [ForwardRef]
           ▾ <Anonymous> [ForwardRef]
               <MyComponent2>
-            <Custom> [ForwardRef]
+            <Custom>
             <MyComponent4> [Memo]
           ▾ <MyComponent> [Memo]
               <MyComponent> [ForwardRef]
             <Baz> [withFoo][withBar]
             <Baz> [Memo][withFoo][withBar]
             <Baz> [ForwardRef][withFoo][withBar]
             <Cache>
-            <memoRefOverride> [Memo]
-            <forwardRefOverride> [ForwardRef]
+            <memoRefOverride>
+            <forwardRefOverride>
     `);
   });
 

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -30,6 +30,7 @@ import {
 import {
   deletePathInObject,
   getDisplayName,
+  getWrappedDisplayName,
   getDefaultComponentFilters,
   getInObject,
   getUID,
@@ -451,10 +452,11 @@ export function getInternalReactConstants(
       case IndeterminateComponent:
         return getDisplayName(resolvedType);
       case ForwardRef:
-        // Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
-        return (
-          (type && type.displayName) ||
-          getDisplayName(resolvedType, 'Anonymous')
+        return getWrappedDisplayName(
+          elementType,
+          resolvedType,
+          'ForwardRef',
+          'Anonymous',
         );
       case HostRoot:
         const fiberRoot = fiber.stateNode;
@@ -475,10 +477,12 @@ export function getInternalReactConstants(
         return 'Lazy';
       case MemoComponent:
       case SimpleMemoComponent:
-        return (
-          (elementType && elementType.displayName) ||
-          (type && type.displayName) ||
-          getDisplayName(resolvedType, 'Anonymous')
+        // Display name in React does not use `Memo` as a wrapper but fallback name.
+        return getWrappedDisplayName(
+          elementType,
+          resolvedType,
+          'Memo',
+          'Anonymous',
         );
       case SuspenseComponent:
         return 'Suspense';

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
@@ -101,6 +101,19 @@ export function getAllEnumerableKeys(
   return keys;
 }
 
+// Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
+export function getWrappedDisplayName(
+  outerType: mixed,
+  innerType: any,
+  wrapperName: string,
+  fallbackName?: string,
+): string {
+  return (
+    (outerType: any).displayName ||
+    `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
+  );
+}
+
 export function getDisplayName(
   type: Function,
   fallbackName: string = 'Anonymous',
@@ -445,20 +458,6 @@ export function separateDisplayNameAndHOCs(
       break;
   }
 
-  if (type === ElementTypeMemo) {
-    if (hocDisplayNames === null) {
-      hocDisplayNames = ['Memo'];
-    } else {
-      hocDisplayNames.unshift('Memo');
-    }
-  } else if (type === ElementTypeForwardRef) {
-    if (hocDisplayNames === null) {
-      hocDisplayNames = ['ForwardRef'];
-    } else {
-      hocDisplayNames.unshift('ForwardRef');
-    }
-  }
-
   return [displayName, hocDisplayNames];
 }