diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js
index 0b460675d2721..0833624fc0aaa 100644
--- 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
;
});
+ MemoFoo.displayName = 'Foo';
ReactNoop.render(
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index 4e80064514006..7daf8be101e6a 100644
--- 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
index b7e9d7e4e8800..d83367e622b60 100644
--- 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();
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
index cbea431c8f7a8..86eee5728ba71 100644
--- 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 = (type: any);
const resolvedThenable = refineResolvedLazyComponent(thenable);