diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js index 2f3cc1741341b..cf8d4aae4a717 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 56795d232895c..17c48099bafbd 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 9959cad7aa525..a146ac8e12489 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 181820646e9fd..77a75dd2c672e 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -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]; }