feat[react-devtools]: display forget badge for components in profilin…

…g sessions
facebook · May 7, 2024 · b7622e9 · b7622e9
1 parent 1d618a9
commit b7622e9
Show file tree

Hide file tree

Showing 16 changed files with 164 additions and 68 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -124,8 +124,8 @@ describe('profiling charts', () => {
  "actualDuration": 0,
  "didRender": true,
  "id": 5,
- "label": "Memo(Child) key="third" (<0.1ms of <0.1ms)",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="third" (<0.1ms of <0.1ms)",
+ "name": "Child",
  "offset": 15,
  "selfDuration": 0,
  "treeBaseDuration": 0,
@@ -134,8 +134,8 @@ describe('profiling charts', () => {
  "actualDuration": 2,
  "didRender": true,
  "id": 4,
- "label": "Memo(Child) key="second" (2ms of 2ms)",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="second" (2ms of 2ms)",
+ "name": "Child",
  "offset": 13,
  "selfDuration": 2,
  "treeBaseDuration": 2,
@@ -144,8 +144,8 @@ describe('profiling charts', () => {
  "actualDuration": 3,
  "didRender": true,
  "id": 3,
- "label": "Memo(Child) key="first" (3ms of 3ms)",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="first" (3ms of 3ms)",
+ "name": "Child",
  "offset": 10,
  "selfDuration": 3,
  "treeBaseDuration": 3,
@@ -175,8 +175,8 @@ describe('profiling charts', () => {
  "actualDuration": 0,
  "didRender": false,
  "id": 5,
- "label": "Memo(Child) key="third"",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="third"",
+ "name": "Child",
  "offset": 15,
  "selfDuration": 0,
  "treeBaseDuration": 0,
@@ -185,8 +185,8 @@ describe('profiling charts', () => {
  "actualDuration": 0,
  "didRender": false,
  "id": 4,
- "label": "Memo(Child) key="second"",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="second"",
+ "name": "Child",
  "offset": 13,
  "selfDuration": 0,
  "treeBaseDuration": 2,
@@ -195,8 +195,8 @@ describe('profiling charts', () => {
  "actualDuration": 0,
  "didRender": false,
  "id": 3,
- "label": "Memo(Child) key="first"",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="first"",
+ "name": "Child",
  "offset": 10,
  "selfDuration": 0,
  "treeBaseDuration": 3,
@@ -264,20 +264,20 @@ describe('profiling charts', () => {
  },
  {
  "id": 3,
- "label": "Memo(Child) (Memo) key="first" (3ms)",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="first" (3ms)",
+ "name": "Child",
  "value": 3,
  },
  {
  "id": 4,
- "label": "Memo(Child) (Memo) key="second" (2ms)",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="second" (2ms)",
+ "name": "Child",
  "value": 2,
  },
  {
  "id": 5,
- "label": "Memo(Child) (Memo) key="third" (<0.1ms)",
- "name": "Memo(Child)",
+ "label": "Child (Memo) key="third" (<0.1ms)",
+ "name": "Child",
  "value": 0,
  },
  ]

diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -214,6 +214,7 @@ export default class ProfilerStore extends EventEmitter<{
  hocDisplayNames: element.hocDisplayNames,
  key: element.key,
  type: element.type,
+ compiledWithForget: element.compiledWithForget,
  };
  profilingSnapshots.set(elementID, snapshotNode);
 

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css
@@ -1,5 +1,4 @@
 .Root {
- padding: 0.25rem;
  user-select: none;
  display: inline-flex;
 }

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import type {Element} from 'react-devtools-shared/src/frontend/types';
-
 import * as React from 'react';
 
 import Badge from './Badge';
@@ -17,11 +15,20 @@ import ForgetBadge from './ForgetBadge';
 import styles from './InspectedElementBadges.css';
 
 type Props = {
- element: Element,
+ hocDisplayNames: null | Array<string>,
+ compiledWithForget: boolean,
 };
 
-export default function InspectedElementBadges({element}: Props): React.Node {
- const {hocDisplayNames, compiledWithForget} = element;
+export default function InspectedElementBadges({
+ hocDisplayNames,
+ compiledWithForget,
+}: Props): React.Node {
+ if (
+ !compiledWithForget &&
+ (hocDisplayNames == null || hocDisplayNames.length === 0)
+ ) {
+ return null;
+ }
 
  return (
  <div className={styles.Root}>

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
@@ -25,6 +25,10 @@
  line-height: var(--line-height-data);
 }
 
+.InspectedElementBadgesContainer {
+ padding: 0.25rem;
+}
+
 .Owner {
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -85,7 +85,12 @@ export default function InspectedElementView({
  return (
  <Fragment>
  <div className={styles.InspectedElement}>
- <InspectedElementBadges element={element} />
+ <div className={styles.InspectedElementBadgesContainer}>
+ <InspectedElementBadges
+ hocDisplayNames={element.hocDisplayNames}
+ compiledWithForget={element.compiledWithForget}
+ />
+ </div>
 
  <InspectedElementPropsTree
  bridge={bridge}

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -17,7 +17,10 @@ import {
  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
 } from 'react-devtools-shared/src/constants';
-import {utfDecodeStringWithRanges} from 'react-devtools-shared/src/utils';
+import {
+ parseElementDisplayNameFromBackend,
+ utfDecodeStringWithRanges,
+} from 'react-devtools-shared/src/utils';
 import {ElementTypeRoot} from 'react-devtools-shared/src/frontend/types';
 import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
@@ -133,6 +136,7 @@ function recursivelyInitializeTree(
  id,
  ): any): number),
  type: node.type,
+ compiledWithForget: node.compiledWithForget,
  });
 
  node.children.forEach(childID =>
@@ -214,6 +218,7 @@ function updateTree(
  parentID: 0,
  treeBaseDuration: 0, // This will be updated by a subsequent operation
  type,
+ compiledWithForget: false,
  };
 
  nodes.set(id, node);
@@ -241,15 +246,19 @@ function updateTree(
  const parentNode = getClonedNode(parentID);
  parentNode.children = parentNode.children.concat(id);
 
+ const {formattedDisplayName, hocDisplayNames, compiledWithForget} =
+ parseElementDisplayNameFromBackend(displayName, type);
+
  const node: CommitTreeNode = {
  children: [],
- displayName,
- hocDisplayNames: null,
+ displayName: formattedDisplayName,
+ hocDisplayNames: hocDisplayNames,
  id,
  key,
  parentID,
  treeBaseDuration: 0, // This will be updated by a subsequent operation
  type,
+ compiledWithForget,
  };
 
  nodes.set(id, node);

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -75,8 +75,14 @@ export function getChartData({
  throw Error(`Could not find node with id "${id}" in commit tree`);
  }
 
- const {children, displayName, hocDisplayNames, key, treeBaseDuration} =
- node;
+ const {
+ children,
+ displayName,
+ hocDisplayNames,
+ key,
+ treeBaseDuration,
+ compiledWithForget,
+ } = node;
 
  const actualDuration = fiberActualDurations.get(id) || 0;
  const selfDuration = fiberSelfDurations.get(id) || 0;
@@ -86,11 +92,13 @@ export function getChartData({
  const maybeKey = key !== null ? ` key="${key}"` : '';
 
  let maybeBadge = '';
+ const maybeForgetBadge = compiledWithForget ? '✨ ' : '';
+
  if (hocDisplayNames !== null && hocDisplayNames.length > 0) {
  maybeBadge = ` (${hocDisplayNames[0]})`;
  }
 
- let label = `${name}${maybeBadge}${maybeKey}`;
+ let label = `${maybeForgetBadge}${name}${maybeBadge}${maybeKey}`;
  if (didRender) {
  label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(
  actualDuration,

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
@@ -1,9 +1,13 @@
 .Toolbar {
  padding: 0.25rem 0;
- margin-bottom: 0.25rem;
  flex: 0 0 auto;
  display: flex;
- align-items: center;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.BadgesContainer:not(:empty) {
+ padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
 }
 
@@ -20,10 +24,11 @@
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
+ padding-bottom: 0.25rem;
+ border-bottom: 1px solid var(--color-border);
 }
 
 .CurrentCommit {
- margin: 0.25rem 0;
  display: block;
  width: 100%;
  text-align: left;

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -9,6 +9,8 @@
 
 import * as React from 'react';
 import {Fragment, useContext} from 'react';
+
+import InspectedElementBadges from '../Components/InspectedElementBadges';
 import {ProfilerContext} from './ProfilerContext';
 import {formatDuration} from './utils';
 import WhatChanged from './WhatChanged';
@@ -34,11 +36,21 @@ export default function HoveredFiberInfo({fiberData}: Props): React.Node {
  const {id, name} = fiberData;
  const {profilingCache} = profilerStore;
 
+ if (rootID === null || selectedCommitIndex === null) {
+ return null;
+ }
+
  const commitIndices = profilingCache.getFiberCommits({
- fiberID: ((id: any): number),
- rootID: ((rootID: any): number),
+ fiberID: id,
+ rootID,
  });
 
+ const {nodes} = profilingCache.getCommitTree({
+ rootID,
+ commitIndex: selectedCommitIndex,
+ });
+ const node = nodes.get(id);
+
  let renderDurationInfo = null;
  let i = 0;
  for (i = 0; i < commitIndices.length; i++) {
@@ -51,7 +63,8 @@ export default function HoveredFiberInfo({fiberData}: Props): React.Node {
 
  renderDurationInfo = (
  <div key={commitIndex} className={styles.CurrentCommit}>
- {formatDuration(selfDuration)}ms of {formatDuration(actualDuration)}ms
+ <strong>Duration:</strong> {formatDuration(selfDuration)}ms of{' '}
+ {formatDuration(actualDuration)}ms
  </div>
  );
 
@@ -63,10 +76,27 @@ export default function HoveredFiberInfo({fiberData}: Props): React.Node {
  <Fragment>
  <div className={styles.Toolbar}>
  <div className={styles.Component}>{name}</div>
- </div>
- <div className={styles.Content}>
- {renderDurationInfo || <div>Did not render.</div>}
- <WhatChanged fiberID={((id: any): number)} />
+
+ {node != null && (
+ <div className={styles.BadgesContainer}>
+ <InspectedElementBadges
+ hocDisplayNames={node.hocDisplayNames}
+ compiledWithForget={node.compiledWithForget}
+ />
+ </div>
+ )}
+
+ {node != null && node.compiledWithForget && (
+ <div>
+ ✨ This component has been auto-memoized by the React Compiler.
+ </div>
+ )}
+
+ <div className={styles.Content}>
+ {renderDurationInfo || <div>Did not render.</div>}
+
+ <WhatChanged fiberID={id} />
+ </div>
  </div>
  </Fragment>
  );

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -61,7 +61,7 @@ export function getChartData({
  throw Error(`Could not find node with id "${id}" in commit tree`);
  }
 
- const {displayName, key, parentID, type} = node;
+ const {displayName, key, parentID, type, compiledWithForget} = node;
 
  // Don't show the root node in this chart.
  if (parentID === 0) {
@@ -72,6 +72,7 @@ export function getChartData({
 
  const name = displayName || 'Anonymous';
  const maybeKey = key !== null ? ` key="${key}"` : '';
+ const maybeForgetBadge = compiledWithForget ? '✨ ' : '';
 
  let maybeBadge = '';
  if (type === ElementTypeForwardRef) {
@@ -80,7 +81,7 @@ export function getChartData({
  maybeBadge = ' (Memo)';
  }
 
- const label = `${name}${maybeBadge}${maybeKey} (${formatDuration(
+ const label = `${maybeForgetBadge}${name}${maybeBadge}${maybeKey} (${formatDuration(
  selfDuration,
  )}ms)`;
  chartNodes.push({

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -11,6 +11,9 @@
  padding: 0.5rem;
  user-select: none;
  overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
 }
 
 .Component {