Skip to content

Commit 546c243

Browse files
iChenLeiBrian Vaughn
authored andcommitted
allow react memo component can set displayName multiple times
1 parent 269dd6e commit 546c243

File tree

2 files changed

+33
-5
lines changed

2 files changed

+33
-5
lines changed

packages/react-reconciler/src/__tests__/ReactMemo-test.js

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -516,7 +516,7 @@ describe('memo', () => {
516516
);
517517
});
518518

519-
it('should honor a inner displayName if set on the wrapped function', () => {
519+
it('should honor a outter displayName when wrapped component and memo component set displayName at the same time.', () => {
520520
function Component(props) {
521521
return <div {...props} />;
522522
}
@@ -532,8 +532,31 @@ describe('memo', () => {
532532
ReactNoop.render(<MemoComponent optional="foo" />),
533533
).toErrorDev(
534534
'Warning: Failed prop type: The prop `required` is marked as required in ' +
535-
'`Foo`, but its value is `undefined`.\n' +
536-
' in Foo (at **)',
535+
'`Bar`, but its value is `undefined`.\n' +
536+
' in Bar (at **)',
537+
);
538+
});
539+
540+
it('can set react memo component displayName multiple times', () => {
541+
function Component(props) {
542+
return <div {...props} />;
543+
}
544+
Component.displayName = 'Foo';
545+
546+
const MemoComponent = React.memo(Component);
547+
MemoComponent.displayName = 'MemoComp01';
548+
MemoComponent.displayName = 'MemoComp02';
549+
MemoComponent.displayName = 'MemoComp03';
550+
MemoComponent.propTypes = {
551+
required: PropTypes.string.isRequired,
552+
};
553+
554+
expect(() =>
555+
ReactNoop.render(<MemoComponent optional="foo" />),
556+
).toErrorDev(
557+
'Warning: Failed prop type: The prop `required` is marked as required in ' +
558+
'`MemoComp03`, but its value is `undefined`.\n' +
559+
' in MemoComp03 (at **)',
537560
);
538561
});
539562
}

packages/react/src/ReactMemo.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,14 @@ export function memo<Props>(
3636
return ownName;
3737
},
3838
set: function(name) {
39-
ownName = name;
40-
if (type.displayName == null) {
39+
if (typeof name === 'string') {
40+
ownName = name;
4141
type.displayName = name;
42+
} else {
43+
console.error(
44+
"%s: is not valid displayName type, React memo's displayName should be a string",
45+
typeof name,
46+
);
4247
}
4348
},
4449
});

0 commit comments

Comments
 (0)