getChartData() — react Function Reference

Architecture documentation for the getChartData() function in RankedChartBuilder.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ getChartData() — react Function Reference

Dependency Diagram

graph TD
  25de7c19_1d31_d9ee_adc1_9880442e856e["getChartData()"]
  2c3a67b8_4c71_e64d_dc53_5096af434452["RankedChartBuilder.js"]
  25de7c19_1d31_d9ee_adc1_9880442e856e -->|defined in| 2c3a67b8_4c71_e64d_dc53_5096af434452
  style 25de7c19_1d31_d9ee_adc1_9880442e856e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js lines 33–93

export function getChartData({
  commitIndex,
  commitTree,
  profilerStore,
  rootID,
}: {
  commitIndex: number,
  commitTree: CommitTree,
  profilerStore: ProfilerStore,
  rootID: number,
}): ChartData {
  const commitDatum = profilerStore.getCommitData(rootID, commitIndex);

  const {fiberActualDurations, fiberSelfDurations} = commitDatum;
  const {nodes} = commitTree;

  const chartDataKey = `${rootID}-${commitIndex}`;
  if (cachedChartData.has(chartDataKey)) {
    return ((cachedChartData.get(chartDataKey): any): ChartData);
  }

  let maxSelfDuration = 0;

  const chartNodes: Array<ChartNode> = [];
  fiberActualDurations.forEach((actualDuration, id) => {
    const node = nodes.get(id);

    if (node == null) {
      throw Error(`Could not find node with id "${id}" in commit tree`);
    }

    const {displayName, key, parentID, type, compiledWithForget} = node;

    // Don't show the root node in this chart.
    if (parentID === 0) {
      return;
    }
    const selfDuration = fiberSelfDurations.get(id) || 0;
    maxSelfDuration = Math.max(maxSelfDuration, selfDuration);

    const name = displayName || 'Anonymous';
    const maybeKey = key !== null ? ` key="${key}"` : '';
    const maybeForgetBadge = compiledWithForget ? '✨ ' : '';

    let maybeBadge = '';
    if (type === ElementTypeForwardRef) {
      maybeBadge = ' (ForwardRef)';
    } else if (type === ElementTypeMemo) {
      maybeBadge = ' (Memo)';
    }

    const label = `${maybeForgetBadge}${name}${maybeBadge}${maybeKey} (${formatDuration(
      selfDuration,
    )}ms)`;
    chartNodes.push({
      id,
      label,
      name,
      value: selfDuration,
    });
  });