Match react-devtools display name behavior for React.memo

facebook · Apr 3, 2019 · 48d8e0a · 48d8e0a
1 parent 4482fdd
commit 48d8e0a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js
@@ -571,6 +571,7 @@ describe('ReactDebugFiberPerf', () => {
     const MemoFoo = React.memo(function Foo() {
       return <div />;
     });
+    MemoFoo.displayName = 'Foo';
     ReactNoop.render(
       <Parent>
         <MemoFoo />

diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -776,6 +776,7 @@ describe('ReactLazy', () => {
     Add.defaultProps = {
       innerWithDefault: 42,
     };
+    Add.displayName = 'Add';
     await verifyInnerPropTypesAreChecked(Add);
   });
 
@@ -787,6 +788,7 @@ describe('ReactLazy', () => {
     Add.propTypes = {
       inner: PropTypes.number.isRequired,
     };
+    Add.displayName = 'Add';
     await verifyInnerPropTypesAreChecked(Add);
   });
 
@@ -847,7 +849,7 @@ describe('ReactLazy', () => {
     expect(() => {
       expect(Scheduler).toFlushAndYield(['Inner default text']);
     }).toWarnDev(
-      'The prop `text` is marked as required in `T`, but its value is `undefined`',
+      'The prop `text` is marked as required in `Memo(T)`, but its value is `undefined`',
     );
     expect(root).toMatchRenderedOutput('Inner default text');
 
@@ -860,7 +862,7 @@ describe('ReactLazy', () => {
       );
       expect(Scheduler).toFlushAndYield([null]);
     }).toWarnDev(
-      'The prop `text` is marked as required in `T`, but its value is `null`',
+      'The prop `text` is marked as required in `Memo(T)`, but its value is `null`',
     );
     expect(root).toMatchRenderedOutput(null);
   });

diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js
@@ -363,7 +363,7 @@ describe('memo', () => {
           expect(Scheduler).toFlushWithoutYielding();
         }).toWarnDev(
           // Outer props are checked in createElement
-          'Invalid prop `outer` of type `string` supplied to `FnInner`, expected `number`.',
+          'Invalid prop `outer` of type `string` supplied to `Memo(FnInner)`, expected `number`.',
         );
 
         // Update
@@ -372,7 +372,7 @@ describe('memo', () => {
           expect(Scheduler).toFlushWithoutYielding();
         }).toWarnDev(
           // Outer props are checked in createElement
-          'Invalid prop `outer` of type `boolean` supplied to `FnInner`, expected `number`.',
+          'Invalid prop `outer` of type `boolean` supplied to `Memo(FnInner)`, expected `number`.',
         );
       });
 
@@ -398,8 +398,8 @@ describe('memo', () => {
           ReactNoop.render(<Outer inner="2" middle="3" outer="4" />);
           expect(Scheduler).toFlushWithoutYielding();
         }).toWarnDev([
-          'Invalid prop `outer` of type `string` supplied to `Inner`, expected `number`.',
-          'Invalid prop `middle` of type `string` supplied to `Inner`, expected `number`.',
+          'Invalid prop `outer` of type `string` supplied to `Memo(Memo(Inner))`, expected `number`.',
+          'Invalid prop `middle` of type `string` supplied to `Memo(Inner)`, expected `number`.',
           'Invalid prop `inner` of type `string` supplied to `Inner`, expected `number`.',
         ]);
 
@@ -410,8 +410,8 @@ describe('memo', () => {
           );
           expect(Scheduler).toFlushWithoutYielding();
         }).toWarnDev([
-          'Invalid prop `outer` of type `boolean` supplied to `Inner`, expected `number`.',
-          'Invalid prop `middle` of type `boolean` supplied to `Inner`, expected `number`.',
+          'Invalid prop `outer` of type `boolean` supplied to `Memo(Memo(Inner))`, expected `number`.',
+          'Invalid prop `middle` of type `boolean` supplied to `Memo(Inner)`, expected `number`.',
           'Invalid prop `inner` of type `boolean` supplied to `Inner`, expected `number`.',
         ]);
       });

diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
@@ -30,10 +30,10 @@ function getWrappedName(
   innerType: any,
   wrapperName: string,
 ): string {
-  const functionName = innerType.displayName || innerType.name || '';
+  const innerName = getComponentName(innerType) || '';
   return (
     (outerType: any).displayName ||
-    (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName)
+    (innerName !== '' ? `${wrapperName}(${innerName})` : wrapperName)
   );
 }
 
@@ -80,7 +80,7 @@ function getComponentName(type: mixed): string | null {
       case REACT_FORWARD_REF_TYPE:
         return getWrappedName(type, type.render, 'ForwardRef');
       case REACT_MEMO_TYPE:
-        return getComponentName(type.type);
+        return getWrappedName(type, type.type, 'Memo');
       case REACT_LAZY_TYPE: {
         const thenable: LazyComponent<mixed> = (type: any);
         const resolvedThenable = refineResolvedLazyComponent(thenable);