maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

devtools: Remove ForwardRef/Memo from display name if `displayName` is set (#21952) 

* feat(devtools): Remove ForwardRef/Memo from display name if `displayName` is set

* Avoid potentially wasting work by inlining `functionName`
This commit is contained in:
Sebastian Silbermann 2022-07-25 09:02:12 +02:00 committed by GitHub
parent 49f8254d6d
commit b66936ece7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/react-devtools-shared/src/__tests__/profilingCharts-test.js vendored
View File

@ -125,8 +125,8 @@ describe('profiling charts', () => {
"actualDuration": 0,
"didRender": true,
"id": 5,
"label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
"name": "Child",
"label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)",
"name": "Memo(Child)",
"offset": 15,
"selfDuration": 0,
"treeBaseDuration": 0,
@ -135,8 +135,8 @@ describe('profiling charts', () => {
"actualDuration": 2,
"didRender": true,
"id": 4,
"label": "Child key=\\"second\\" (2ms of 2ms)",
"name": "Child",
"label": "Memo(Child) key=\\"second\\" (2ms of 2ms)",
"name": "Memo(Child)",
"offset": 13,
"selfDuration": 2,
"treeBaseDuration": 2,
@ -145,8 +145,8 @@ describe('profiling charts', () => {
"actualDuration": 3,
"didRender": true,
"id": 3,
"label": "Child key=\\"first\\" (3ms of 3ms)",
"name": "Child",
"label": "Memo(Child) key=\\"first\\" (3ms of 3ms)",
"name": "Memo(Child)",
"offset": 10,
"selfDuration": 3,
"treeBaseDuration": 3,
@ -176,8 +176,8 @@ describe('profiling charts', () => {
"actualDuration": 0,
"didRender": false,
"id": 5,
"label": "Child key=\\"third\\"",
"name": "Child",
"label": "Memo(Child) key=\\"third\\"",
"name": "Memo(Child)",
"offset": 15,
"selfDuration": 0,
"treeBaseDuration": 0,
@ -186,8 +186,8 @@ describe('profiling charts', () => {
"actualDuration": 0,
"didRender": false,
"id": 4,
"label": "Child key=\\"second\\"",
"name": "Child",
"label": "Memo(Child) key=\\"second\\"",
"name": "Memo(Child)",
"offset": 13,
"selfDuration": 0,
"treeBaseDuration": 2,
@ -196,8 +196,8 @@ describe('profiling charts', () => {
"actualDuration": 0,
"didRender": false,
"id": 3,
"label": "Child key=\\"first\\"",
"name": "Child",
"label": "Memo(Child) key=\\"first\\"",
"name": "Memo(Child)",
"offset": 10,
"selfDuration": 0,
"treeBaseDuration": 3,
@ -267,20 +267,20 @@ describe('profiling charts', () => {
},
Object {
"id": 3,
"label": "Child (Memo) key=\\"first\\" (3ms)",
"name": "Child",
"label": "Memo(Child) (Memo) key=\\"first\\" (3ms)",
"name": "Memo(Child)",
"value": 3,
},
Object {
"id": 4,
"label": "Child (Memo) key=\\"second\\" (2ms)",
"name": "Child",
"label": "Memo(Child) (Memo) key=\\"second\\" (2ms)",
"name": "Memo(Child)",
"value": 2,
},
Object {
"id": 5,
"label": "Child (Memo) key=\\"third\\" (<0.1ms)",
"name": "Child",
"label": "Memo(Child) (Memo) key=\\"third\\" (<0.1ms)",
"name": "Memo(Child)",
"value": 0,
},
]

6
packages/react-devtools-shared/src/__tests__/store-test.js vendored
View File

@ -1507,7 +1507,7 @@ describe('Store', () => {
<MyComponent> [ForwardRef]
▾ <Anonymous> [ForwardRef]
<MyComponent2>
<Custom> [ForwardRef]
<Custom>
<MyComponent4> [Memo]
▾ <MyComponent> [Memo]
<MyComponent> [ForwardRef]
@ -1515,8 +1515,8 @@ describe('Store', () => {
<Baz> [Memo][withFoo][withBar]
<Baz> [ForwardRef][withFoo][withBar]
<Cache>
<memoRefOverride> [Memo]
<forwardRefOverride> [ForwardRef]
<memoRefOverride>
<forwardRefOverride>
`);
});

20
packages/react-devtools-shared/src/backend/renderer.js vendored
View File

@ -30,6 +30,7 @@ import {
import {
deletePathInObject,
getDisplayName,
getWrappedDisplayName,
getDefaultComponentFilters,
getInObject,
getUID,
@ -451,10 +452,11 @@ export function getInternalReactConstants(
case IndeterminateComponent:
return getDisplayName(resolvedType);
case ForwardRef:
// Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
return (
(type && type.displayName) ||
getDisplayName(resolvedType, 'Anonymous')
return getWrappedDisplayName(
elementType,
resolvedType,
'ForwardRef',
'Anonymous',
);
case HostRoot:
const fiberRoot = fiber.stateNode;
@ -475,10 +477,12 @@ export function getInternalReactConstants(
return 'Lazy';
case MemoComponent:
case SimpleMemoComponent:
return (
(elementType && elementType.displayName) ||
(type && type.displayName) ||
getDisplayName(resolvedType, 'Anonymous')
// Display name in React does not use `Memo` as a wrapper but fallback name.
return getWrappedDisplayName(
elementType,
resolvedType,
'Memo',
'Anonymous',
);
case SuspenseComponent:
return 'Suspense';

27
packages/react-devtools-shared/src/utils.js vendored
View File

@ -101,6 +101,19 @@ export function getAllEnumerableKeys(
return keys;
}
// Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
export function getWrappedDisplayName(
outerType: mixed,
innerType: any,
wrapperName: string,
fallbackName?: string,
): string {
return (
(outerType: any).displayName ||
`${wrapperName}(${getDisplayName(innerType, fallbackName)})`
);
}
export function getDisplayName(
type: Function,
fallbackName: string = 'Anonymous',
@ -445,20 +458,6 @@ export function separateDisplayNameAndHOCs(
break;
}
if (type === ElementTypeMemo) {
if (hocDisplayNames === null) {
hocDisplayNames = ['Memo'];
} else {
hocDisplayNames.unshift('Memo');
}
} else if (type === ElementTypeForwardRef) {
if (hocDisplayNames === null) {
hocDisplayNames = ['ForwardRef'];
} else {
hocDisplayNames.unshift('ForwardRef');
}
}
return [displayName, hocDisplayNames];
}