Repository: facebook/react
Pull request: [DevTools] Remove displayName from inspected data

This just clarifies that this is actually unused in the front end. We use the name from the original instance as the canonical name.


Changed files:
filename: packages/react-devtools-shared/src/backend/fiber/renderer.js
patch: @@ -4212,7 +4212,6 @@ export function attach(
 
       key: key != null ? key : null,
 
-      displayName: getDisplayNameForFiber(fiber),
       type: elementType,
 
       // Inspectable properties.
@@ -4252,13 +4251,6 @@ export function attach(
       typeof componentInfo.key === 'string' ? componentInfo.key : null;
     const props = null; // TODO: Track props on ReactComponentInfo;
 
-    const env = componentInfo.env;
-    let displayName = componentInfo.name || '';
-    if (typeof env === 'string') {
-      // We model environment as an HoC name for now.
-      displayName = env + '(' + displayName + ')';
-    }
-
     const owners: null | Array<SerializedElement> =
       getOwnersListFromInstance(virtualInstance);
 
@@ -4311,7 +4303,6 @@ export function attach(
 
       key: key,
 
-      displayName: displayName,
       type: ElementTypeVirtual,
 
       // Inspectable properties.
@@ -4675,10 +4666,12 @@ export function attach(
       return;
     }
 
+    const displayName = getDisplayNameForElementID(id);
+
     const supportsGroup = typeof console.groupCollapsed === 'function';
     if (supportsGroup) {
       console.groupCollapsed(
-        `[Click to expand] %c<${result.displayName || 'Component'} />`,
+        `[Click to expand] %c<${displayName || 'Component'} />`,
         // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
         'color: var(--dom-tag-name-color); font-weight: normal;',
       );

filename: packages/react-devtools-shared/src/backend/legacy/renderer.js
patch: @@ -775,7 +775,7 @@ export function attach(
       return null;
     }
 
-    const {displayName, key} = getData(internalInstance);
+    const {key} = getData(internalInstance);
     const type = getElementType(internalInstance);
 
     let context = null;
@@ -842,8 +842,6 @@ export function attach(
       // Only legacy context exists in legacy versions.
       hasLegacyContext: true,
 
-      displayName: displayName,
-
       type: type,
 
       key: key != null ? key : null,
@@ -876,10 +874,12 @@ export function attach(
       return;
     }
 
+    const displayName = getDisplayNameForElementID(id);
+
     const supportsGroup = typeof console.groupCollapsed === 'function';
     if (supportsGroup) {
       console.groupCollapsed(
-        `[Click to expand] %c<${result.displayName || 'Component'} />`,
+        `[Click to expand] %c<${displayName || 'Component'} />`,
         // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
         'color: var(--dom-tag-name-color); font-weight: normal;',
       );

filename: packages/react-devtools-shared/src/backend/types.js
patch: @@ -239,8 +239,6 @@ export type OwnersList = {
 export type InspectedElement = {
   id: number,
 
-  displayName: string | null,
-
   // Does the current renderer support editable hooks and function props?
   canEditHooks: boolean,
   canEditFunctionProps: boolean,