[DevTools] Show HOC names in profiler (#19283)
* show hoc names in profiler * Added hocDisplayNames.length check Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Nick Reiley committed
Jul 10, 2020 at 20:21 UTC
17efbf7d63f3e4abb75b65b9baecdfe1b84fb4d5
5 files changed
+27
-9
packages/react-devtools-shared/src/devtools/ProfilerStore.js
+1
@@ -211,6 +211,7 @@ export default class ProfilerStore extends EventEmitter<{|
211
id: elementID,
212
children: element.children.slice(0),
213
displayName: element.displayName,
214
+ hocDisplayNames: element.hocDisplayNames,
215
key: element.key,
216
type: element.type,
217
};
packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+3
@@ -130,6 +130,7 @@ function recursivelyInitializeTree(
130
id,
131
children: node.children,
132
displayName: node.displayName,
133
+ hocDisplayNames: node.hocDisplayNames,
134
key: node.key,
135
parentID,
136
treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(
@@ -208,6 +209,7 @@ function updateTree(
209
const node: CommitTreeNode = {
210
children: [],
211
displayName: null,
212
+ hocDisplayNames: null,
213
id,
214
key: null,
215
parentID: 0,
@@ -243,6 +245,7 @@ function updateTree(
245
const node: CommitTreeNode = {
246
children: [],
247
displayName,
248
+ hocDisplayNames: null,
249
id,
250
key,
251
parentID,
packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+9
-9
@@ -7,10 +7,6 @@
7
* @flow
8
*/
9
10
-import {
11
- ElementTypeForwardRef,
12
- ElementTypeMemo,
13
-} from 'react-devtools-shared/src/types';
10
import {formatDuration} from './utils';
11
import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
12
@@ -75,7 +71,13 @@ export function getChartData({
71
throw Error(`Could not find node with id "${id}" in commit tree`);
72
}
73
78
- const {children, displayName, key, treeBaseDuration, type} = node;
74
+ const {
75
+ children,
76
+ displayName,
77
+ hocDisplayNames,
78
+ key,
79
+ treeBaseDuration,
80
+ } = node;
81
82
const actualDuration = fiberActualDurations.get(id) || 0;
83
const selfDuration = fiberSelfDurations.get(id) || 0;
@@ -85,10 +87,8 @@ export function getChartData({
87
const maybeKey = key !== null ? ` key="${key}"` : '';
88
89
let maybeBadge = '';
88
- if (type === ElementTypeForwardRef) {
89
- maybeBadge = ' (ForwardRef)';
90
- } else if (type === ElementTypeMemo) {
91
- maybeBadge = ' (Memo)';
90
+ if (hocDisplayNames !== null && hocDisplayNames.length > 0) {
91
+ maybeBadge = ` (${hocDisplayNames[0]})`;
92
}
93
94
let label = `${name}${maybeBadge}${maybeKey}`;
packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+2
@@ -13,6 +13,7 @@ export type CommitTreeNode = {|
13
id: number,
14
children: Array<number>,
15
displayName: string | null,
16
+ hocDisplayNames: Array<string> | null,
17
key: number | string | null,
18
parentID: number,
19
treeBaseDuration: number,
@@ -34,6 +35,7 @@ export type SnapshotNode = {|
35
id: number,
36
children: Array<number>,
37
displayName: string | null,
38
+ hocDisplayNames: Array<string> | null,
39
key: number | string | null,
40
type: ElementType,
41
|};
packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
+12
@@ -93,12 +93,24 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
93
const MemoWithHooks = memo(FunctionWithHooks);
94
const ForwardRefWithHooks = forwardRef(FunctionWithHooks);
95
96
+function wrapWithHoc(Component) {
97
+ function Hoc() {
98
+ return <Component />;
99
+ }
100
+ // $FlowFixMe
101
+ const displayName = Component.displayName || Component.name;
102
+ Hoc.displayName = `withHoc(${displayName})`;
103
+ return Hoc;
104
+}
105
+const HocWithHooks = wrapWithHoc(FunctionWithHooks);
106
+
107
export default function CustomHooks() {
108
return (
109
<Fragment>
110
<FunctionWithHooks />
111
<MemoWithHooks />
112
<ForwardRefWithHooks />
113
+ <HocWithHooks />
114
</Fragment>
115
);
116
}