[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>

Author: bl00mber

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,
       };

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,

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,13 @@ 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,
+      hocDisplayNames,
+      key,
+      treeBaseDuration,
+    } = node;
 
     const actualDuration = fiberActualDurations.get(id) || 0;
     const selfDuration = fiberSelfDurations.get(id) || 0;
@@ -85,10 +87,8 @@ export function getChartData({
     const maybeKey = key !== null ? ` key="${key}"` : '';
 
     let maybeBadge = '';
-    if (type === ElementTypeForwardRef) {
-      maybeBadge = ' (ForwardRef)';
-    } else if (type === ElementTypeMemo) {
-      maybeBadge = ' (Memo)';
+    if (hocDisplayNames !== null && hocDisplayNames.length > 0) {
+      maybeBadge = ` (${hocDisplayNames[0]})`;
     }
 
     let label = `${name}${maybeBadge}${maybeKey}`;

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,
 |};

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>
   );
 }