Match react-devtools display name behavior for React.memo

facebook · May 25, 2020 · f30ca94 · f30ca94
1 parent 3ca1904
commit f30ca94
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -867,6 +867,7 @@ describe('ReactLazy', () => {
       return props.inner + props.outer;
     };
     Add = React.memo(Add);
+    Add.displayName = 'Add';
     Add.propTypes = {
       inner: PropTypes.number.isRequired,
       innerWithDefault: PropTypes.number.isRequired,
@@ -882,6 +883,7 @@ describe('ReactLazy', () => {
       return props.inner + props.outer;
     };
     Add = React.memo(Add);
+    Add.displayName = 'Add';
     Add.propTypes = {
       inner: PropTypes.number.isRequired,
     };
@@ -945,7 +947,7 @@ describe('ReactLazy', () => {
     expect(() => {
       expect(Scheduler).toFlushAndYield(['Inner default text']);
     }).toErrorDev(
-      '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');
 
@@ -958,7 +960,7 @@ describe('ReactLazy', () => {
       );
       expect(Scheduler).toFlushAndYield([null]);
     }).toErrorDev(
-      '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);
   });
@@ -1050,6 +1052,7 @@ describe('ReactLazy', () => {
     Add.defaultProps = {
       inner: 2,
     };
+    Add.displayName = 'Add';
     const LazyAdd = lazy(() => fakeImport(Add));
     const root = ReactTestRenderer.create(
       <Suspense fallback={<Text text="Loading..." />}>

diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -365,7 +365,7 @@ describe('memo', () => {
           expect(Scheduler).toFlushWithoutYielding();
         }).toErrorDev(
           // 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
@@ -374,7 +374,7 @@ describe('memo', () => {
           expect(Scheduler).toFlushWithoutYielding();
         }).toErrorDev(
           // 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`.',
         );
       });
 
@@ -408,8 +408,8 @@ describe('memo', () => {
           );
           expect(Scheduler).toFlushWithoutYielding();
         }).toErrorDev([
-          '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`.',
         ]);
 
@@ -422,8 +422,8 @@ describe('memo', () => {
           );
           expect(Scheduler).toFlushWithoutYielding();
         }).toErrorDev([
-          '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)
   );
 }
 
@@ -85,7 +85,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_BLOCK_TYPE:
         return getComponentName(type._render);
       case REACT_LAZY_TYPE: {