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`
Sebastian Silbermann committed
Jul 25, 2022 at 09:02 UTC
b66936ece7d9ad41a33e077933c9af0bda8bff87
4 files changed
+46
-43
packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+18
-18
@@ -125,8 +125,8 @@ describe('profiling charts', () => {
125
"actualDuration": 0,
126
"didRender": true,
127
"id": 5,
128
- "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
129
- "name": "Child",
128
+ "label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)",
129
+ "name": "Memo(Child)",
130
"offset": 15,
131
"selfDuration": 0,
132
"treeBaseDuration": 0,
@@ -135,8 +135,8 @@ describe('profiling charts', () => {
135
"actualDuration": 2,
136
"didRender": true,
137
"id": 4,
138
- "label": "Child key=\\"second\\" (2ms of 2ms)",
139
- "name": "Child",
138
+ "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)",
139
+ "name": "Memo(Child)",
140
"offset": 13,
141
"selfDuration": 2,
142
"treeBaseDuration": 2,
@@ -145,8 +145,8 @@ describe('profiling charts', () => {
145
"actualDuration": 3,
146
"didRender": true,
147
"id": 3,
148
- "label": "Child key=\\"first\\" (3ms of 3ms)",
149
- "name": "Child",
148
+ "label": "Memo(Child) key=\\"first\\" (3ms of 3ms)",
149
+ "name": "Memo(Child)",
150
"offset": 10,
151
"selfDuration": 3,
152
"treeBaseDuration": 3,
@@ -176,8 +176,8 @@ describe('profiling charts', () => {
176
"actualDuration": 0,
177
"didRender": false,
178
"id": 5,
179
- "label": "Child key=\\"third\\"",
180
- "name": "Child",
179
+ "label": "Memo(Child) key=\\"third\\"",
180
+ "name": "Memo(Child)",
181
"offset": 15,
182
"selfDuration": 0,
183
"treeBaseDuration": 0,
@@ -186,8 +186,8 @@ describe('profiling charts', () => {
186
"actualDuration": 0,
187
"didRender": false,
188
"id": 4,
189
- "label": "Child key=\\"second\\"",
190
- "name": "Child",
189
+ "label": "Memo(Child) key=\\"second\\"",
190
+ "name": "Memo(Child)",
191
"offset": 13,
192
"selfDuration": 0,
193
"treeBaseDuration": 2,
@@ -196,8 +196,8 @@ describe('profiling charts', () => {
196
"actualDuration": 0,
197
"didRender": false,
198
"id": 3,
199
- "label": "Child key=\\"first\\"",
200
- "name": "Child",
199
+ "label": "Memo(Child) key=\\"first\\"",
200
+ "name": "Memo(Child)",
201
"offset": 10,
202
"selfDuration": 0,
203
"treeBaseDuration": 3,
@@ -267,20 +267,20 @@ describe('profiling charts', () => {
267
},
268
Object {
269
"id": 3,
270
- "label": "Child (Memo) key=\\"first\\" (3ms)",
271
- "name": "Child",
270
+ "label": "Memo(Child) (Memo) key=\\"first\\" (3ms)",
271
+ "name": "Memo(Child)",
272
"value": 3,
273
},
274
Object {
275
"id": 4,
276
- "label": "Child (Memo) key=\\"second\\" (2ms)",
277
- "name": "Child",
276
+ "label": "Memo(Child) (Memo) key=\\"second\\" (2ms)",
277
+ "name": "Memo(Child)",
278
"value": 2,
279
},
280
Object {
281
"id": 5,
282
- "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
283
- "name": "Child",
282
+ "label": "Memo(Child) (Memo) key=\\"third\\" (<0.1ms)",
283
+ "name": "Memo(Child)",
284
"value": 0,
285
},
286
]
packages/react-devtools-shared/src/__tests__/store-test.js
+3
-3
@@ -1507,7 +1507,7 @@ describe('Store', () => {
1507
<MyComponent> [ForwardRef]
1508
▾ <Anonymous> [ForwardRef]
1509
<MyComponent2>
1510
- <Custom> [ForwardRef]
1510
+ <Custom>
1511
<MyComponent4> [Memo]
1512
▾ <MyComponent> [Memo]
1513
<MyComponent> [ForwardRef]
@@ -1515,8 +1515,8 @@ describe('Store', () => {
1515
<Baz> [Memo][withFoo][withBar]
1516
<Baz> [ForwardRef][withFoo][withBar]
1517
<Cache>
1518
- <memoRefOverride> [Memo]
1519
- <forwardRefOverride> [ForwardRef]
1518
+ <memoRefOverride>
1519
+ <forwardRefOverride>
1520
`);
1521
});
1522
packages/react-devtools-shared/src/backend/renderer.js
+12
-8
@@ -30,6 +30,7 @@ import {
30
import {
31
deletePathInObject,
32
getDisplayName,
33
+ getWrappedDisplayName,
34
getDefaultComponentFilters,
35
getInObject,
36
getUID,
@@ -451,10 +452,11 @@ export function getInternalReactConstants(
452
case IndeterminateComponent:
453
return getDisplayName(resolvedType);
454
case ForwardRef:
454
- // Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
455
- return (
456
- (type && type.displayName) ||
457
- getDisplayName(resolvedType, 'Anonymous')
455
+ return getWrappedDisplayName(
456
+ elementType,
457
+ resolvedType,
458
+ 'ForwardRef',
459
+ 'Anonymous',
460
);
461
case HostRoot:
462
const fiberRoot = fiber.stateNode;
@@ -475,10 +477,12 @@ export function getInternalReactConstants(
477
return 'Lazy';
478
case MemoComponent:
479
case SimpleMemoComponent:
478
- return (
479
- (elementType && elementType.displayName) ||
480
- (type && type.displayName) ||
481
- getDisplayName(resolvedType, 'Anonymous')
480
+ // Display name in React does not use `Memo` as a wrapper but fallback name.
481
+ return getWrappedDisplayName(
482
+ elementType,
483
+ resolvedType,
484
+ 'Memo',
485
+ 'Anonymous',
486
);
487
case SuspenseComponent:
488
return 'Suspense';
packages/react-devtools-shared/src/utils.js
+13
-14
@@ -101,6 +101,19 @@ export function getAllEnumerableKeys(
101
return keys;
102
}
103
104
+// Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
105
+export function getWrappedDisplayName(
106
+ outerType: mixed,
107
+ innerType: any,
108
+ wrapperName: string,
109
+ fallbackName?: string,
110
+): string {
111
+ return (
112
+ (outerType: any).displayName ||
113
+ `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
114
+ );
115
+}
116
+
117
export function getDisplayName(
118
type: Function,
119
fallbackName: string = 'Anonymous',
@@ -445,20 +458,6 @@ export function separateDisplayNameAndHOCs(
458
break;
459
}
460
448
- if (type === ElementTypeMemo) {
449
- if (hocDisplayNames === null) {
450
- hocDisplayNames = ['Memo'];
451
- } else {
452
- hocDisplayNames.unshift('Memo');
453
- }
454
- } else if (type === ElementTypeForwardRef) {
455
- if (hocDisplayNames === null) {
456
- hocDisplayNames = ['ForwardRef'];
457
- } else {
458
- hocDisplayNames.unshift('ForwardRef');
459
- }
460
- }
461
-
461
return [displayName, hocDisplayNames];
462
}
463