react Architecture Docs
Home / Function/ TooltipReactComponentMeasure() — react Function Reference

TooltipReactComponentMeasure() — react Function Reference

Architecture documentation for the TooltipReactComponentMeasure() function in EventTooltip.js from the react codebase.

Function javascript BabelCompiler Validation calls 3

Entity Profile

Dependency Diagram

graph TD
  40c12e4f_9127_e524_60c0_a2a49d23e2ee["TooltipReactComponentMeasure()"]
  57dc23c0_c74d_e09e_ad1f_116cb590a38c["EventTooltip.js"]
  40c12e4f_9127_e524_60c0_a2a49d23e2ee -->|defined in| 57dc23c0_c74d_e09e_ad1f_116cb590a38c
  9b5bb02f_1f54_393f_07e9_6f895ce3958a["trimString()"]
  40c12e4f_9127_e524_60c0_a2a49d23e2ee -->|calls| 9b5bb02f_1f54_393f_07e9_6f895ce3958a
  5ec23e51_b01a_6d75_3953_f12a0c47408d["formatTimestamp()"]
  40c12e4f_9127_e524_60c0_a2a49d23e2ee -->|calls| 5ec23e51_b01a_6d75_3953_f12a0c47408d
  7a7bab2a_0762_eb64_07af_7551fee380d1["formatDuration()"]
  40c12e4f_9127_e524_60c0_a2a49d23e2ee -->|calls| 7a7bab2a_0762_eb64_07af_7551fee380d1
  style 40c12e4f_9127_e524_60c0_a2a49d23e2ee fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/EventTooltip.js lines 137–182

const TooltipReactComponentMeasure = ({
  componentMeasure,
}: {
  componentMeasure: ReactComponentMeasure,
}) => {
  const {componentName, duration, timestamp, type, warning} = componentMeasure;

  let label = componentName;
  switch (type) {
    case 'render':
      label += ' rendered';
      break;
    case 'layout-effect-mount':
      label += ' mounted layout effect';
      break;
    case 'layout-effect-unmount':
      label += ' unmounted layout effect';
      break;
    case 'passive-effect-mount':
      label += ' mounted passive effect';
      break;
    case 'passive-effect-unmount':
      label += ' unmounted passive effect';
      break;
  }

  return (
    <>
      <div className={styles.TooltipSection}>
        {trimString(label, 768)}
        <div className={styles.Divider} />
        <div className={styles.DetailsGrid}>
          <div className={styles.DetailsGridLabel}>Timestamp:</div>
          <div>{formatTimestamp(timestamp)}</div>
          <div className={styles.DetailsGridLabel}>Duration:</div>
          <div>{formatDuration(duration)}</div>
        </div>
      </div>
      {warning !== null && (
        <div className={styles.TooltipWarningSection}>
          <div className={styles.WarningText}>{warning}</div>
        </div>
      )}
    </>
  );
};

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does TooltipReactComponentMeasure() do?
TooltipReactComponentMeasure() is a function in the react codebase, defined in packages/react-devtools-timeline/src/EventTooltip.js.
Where is TooltipReactComponentMeasure() defined?
TooltipReactComponentMeasure() is defined in packages/react-devtools-timeline/src/EventTooltip.js at line 137.
What does TooltipReactComponentMeasure() call?
TooltipReactComponentMeasure() calls 3 function(s): formatDuration, formatTimestamp, trimString.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free