Skip to content

Commit

Permalink
show hoc names in profiler
Browse files Browse the repository at this point in the history
  • Loading branch information
bl00mber committed Jul 8, 2020
1 parent 6fd4321 commit 5cb363d
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ function recursivelyInitializeTree(
id,
children: node.children,
displayName: node.displayName,
hocDisplayNames: node.hocDisplayNames,
key: node.key,
parentID,
treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
Expand All @@ -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}`;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
|};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down

0 comments on commit 5cb363d

Please sign in to comment.