show hoc names in profiler

facebook · Jul 8, 2020 · e3530ab · e3530ab
1 parent 6fd4321
commit e3530ab
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -211,6 +211,7 @@ export default class ProfilerStore extends EventEmitter<{|
  id: elementID,
  children: element.children.slice(0),
  displayName: element.displayName,
+ hocDisplayNames: element.hocDisplayNames,
  key: element.key,
  type: element.type,
  };

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -130,6 +130,7 @@ function recursivelyInitializeTree(
  id,
  children: node.children,
  displayName: node.displayName,
+ hocDisplayNames: node.hocDisplayNames,
  key: node.key,
  parentID,
  treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(
@@ -208,6 +209,7 @@ function updateTree(
  const node: CommitTreeNode = {
  children: [],
  displayName: null,
+ hocDisplayNames: null,
  id,
  key: null,
  parentID: 0,
@@ -243,6 +245,7 @@ function updateTree(
  const node: CommitTreeNode = {
  children: [],
  displayName,
+ hocDisplayNames: null,
  id,
  key,
  parentID,

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -7,10 +7,6 @@
  * @flow
  */
 
-import {
- ElementTypeForwardRef,
- ElementTypeMemo,
-} from 'react-devtools-shared/src/types';
 import {formatDuration} from './utils';
 import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
@@ -75,7 +71,7 @@ export function getChartData({
  throw Error(`Could not find node with id "${id}" in commit tree`);
  }
 
- const {children, displayName, key, treeBaseDuration, type} = node;
+ const {children, displayName, key, treeBaseDuration} = node;
 
  const actualDuration = fiberActualDurations.get(id) || 0;
  const selfDuration = fiberSelfDurations.get(id) || 0;
@@ -85,10 +81,8 @@ export function getChartData({
  const maybeKey = key !== null ? ` key="${key}"` : '';
 
  let maybeBadge = '';
- if (type === ElementTypeForwardRef) {
- maybeBadge = ' (ForwardRef)';
- } else if (type === ElementTypeMemo) {
- maybeBadge = ' (Memo)';
+ if (node.hocDisplayNames) {
+ maybeBadge = ` (${node.hocDisplayNames[0]})`;
  }
 
  let label = `${name}${maybeBadge}${maybeKey}`;

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -13,6 +13,7 @@ export type CommitTreeNode = {|
  id: number,
  children: Array<number>,
  displayName: string | null,
+ hocDisplayNames: Array<string> | null,
  key: number | string | null,
  parentID: number,
  treeBaseDuration: number,
@@ -34,6 +35,7 @@ export type SnapshotNode = {|
  id: number,
  children: Array<number>,
  displayName: string | null,
+ hocDisplayNames: Array<string> | null,
  key: number | string | null,
  type: ElementType,
 |};

diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
@@ -93,12 +93,24 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
 const MemoWithHooks = memo(FunctionWithHooks);
 const ForwardRefWithHooks = forwardRef(FunctionWithHooks);
 
+function wrapWithHoc(Component) {
+ function Hoc() {
+ return <Component />;
+ }
+ // $FlowFixMe
+ const displayName = Component.displayName || Component.name;
+ Hoc.displayName = `withHoc(${displayName})`;
+ return Hoc;
+}
+const HocWithHooks = wrapWithHoc(FunctionWithHooks);
+
 export default function CustomHooks() {
  return (
  <Fragment>
  <FunctionWithHooks />
  <MemoWithHooks />
  <ForwardRefWithHooks />
+ <HocWithHooks />
  </Fragment>
  );
 }