[react-devtools-shared] use correct displayName of memo(forwardRef(Co…

…mponent))
facebook · Nov 4, 2019 · 04341d4 · 04341d4
1 parent 6f2849e
commit 04341d4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -328,7 +328,7 @@ export function getInternalReactConstants(
 
   // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
   function getDisplayNameForFiber(fiber: Fiber): string | null {
-    const {elementType, type, tag} = fiber;
+    const {type, tag} = fiber;
 
     // This is to support lazy components with a Promise as the type.
     // see https://github.com/facebook/react/pull/13397
@@ -348,10 +348,11 @@ export function getInternalReactConstants(
       case FunctionComponent:
       case IndeterminateComponent:
         return getDisplayName(resolvedType);
+      case MemoComponent:
+      case SimpleMemoComponent:
       case ForwardRef:
         return (
-          resolvedType.displayName ||
-          getDisplayName(resolvedType.render, 'Anonymous')
+          resolvedType.displayName || getDisplayName(resolvedType, 'Anonymous')
         );
       case HostRoot:
         return null;
@@ -361,13 +362,6 @@ export function getInternalReactConstants(
       case HostText:
       case Fragment:
         return null;
-      case MemoComponent:
-      case SimpleMemoComponent:
-        if (elementType.displayName) {
-          return elementType.displayName;
-        } else {
-          return getDisplayName(type, 'Anonymous');
-        }
       case SuspenseComponent:
         return 'Suspense';
       case SuspenseListComponent:

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
@@ -29,6 +29,8 @@ import {
 } from 'react-devtools-shared/src/types';
 import {localStorageGetItem, localStorageSetItem} from './storage';
 
+import {isMemo, isForwardRef} from 'react-is';
+
 import type {ComponentFilter, ElementType} from './types';
 
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
@@ -55,6 +57,10 @@ export function getDisplayName(
     displayName = type.displayName;
   } else if (typeof type.name === 'string' && type.name !== '') {
     displayName = type.name;
+  } else if (isMemo(type)) {
+    displayName = getDisplayName(type.type);
+  } else if (isForwardRef(type)) {
+    displayName = getDisplayName(type.render);
   }
 
   cachedDisplayNames.set(type, displayName);