From db8187d3c3b5b43da01495c82ca132d81b744a3c Mon Sep 17 00:00:00 2001 From: eps1lon Date: Sat, 24 Jul 2021 13:47:18 +0200 Subject: [PATCH 1/2] feat(devtools): Remove ForwardRef/Memo from display name if `displayName` is set --- .../src/__tests__/profilingCharts-test.js | 36 +++++++++---------- .../src/__tests__/store-test.js | 6 ++-- .../src/backend/renderer.js | 20 ++++++----- packages/react-devtools-shared/src/utils.js | 25 ++++++------- 4 files changed, 44 insertions(+), 43 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js index 2f3cc174134..cf8d4aae4a7 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js @@ -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, }, ] diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 56795d23289..17c48099baf 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -1505,7 +1505,7 @@ describe('Store', () => { [ForwardRef] ▾ [ForwardRef] - [ForwardRef] + [Memo] ▾ [Memo] [ForwardRef] @@ -1513,8 +1513,8 @@ describe('Store', () => { [Memo][withFoo][withBar] [ForwardRef][withFoo][withBar] - [Memo] - [ForwardRef] + + `); }); diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 9959cad7aa5..a146ac8e124 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -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'; diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 181820646e9..2efb02c2731 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -101,6 +101,17 @@ 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 { + const functionName = getDisplayName(innerType, fallbackName); + return (outerType: any).displayName || `${wrapperName}(${functionName})`; +} + export function getDisplayName( type: Function, fallbackName: string = 'Anonymous', @@ -445,20 +456,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]; } From 6f0ccb530e4c631545e1fe89fdd4f2a73c4fc7df Mon Sep 17 00:00:00 2001 From: eps1lon Date: Sat, 16 Jul 2022 09:50:52 +0200 Subject: [PATCH 2/2] Avoid potentially wasting work by inlining `functionName` --- packages/react-devtools-shared/src/utils.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 2efb02c2731..77a75dd2c67 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -108,8 +108,10 @@ export function getWrappedDisplayName( wrapperName: string, fallbackName?: string, ): string { - const functionName = getDisplayName(innerType, fallbackName); - return (outerType: any).displayName || `${wrapperName}(${functionName})`; + return ( + (outerType: any).displayName || + `${wrapperName}(${getDisplayName(innerType, fallbackName)})` + ); } export function getDisplayName(