logComponentRender() — react Function Reference

Architecture documentation for the logComponentRender() function in ReactFlightPerformanceTrack.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ logComponentRender() — react Function Reference

Dependency Diagram

graph TD
  acfb1189_94ae_cc04_e9b9_9f8c42acf1a2["logComponentRender()"]
  e5244d6e_35d7_7c99_420d_82c7be8fe931["ReactFlightPerformanceTrack.js"]
  acfb1189_94ae_cc04_e9b9_9f8c42acf1a2 -->|defined in| e5244d6e_35d7_7c99_420d_82c7be8fe931
  style acfb1189_94ae_cc04_e9b9_9f8c42acf1a2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-client/src/ReactFlightPerformanceTrack.js lines 75–142

export function logComponentRender(
  componentInfo: ReactComponentInfo,
  trackIdx: number,
  startTime: number,
  endTime: number,
  childrenEndTime: number,
  rootEnv: string,
): void {
  if (supportsUserTiming && childrenEndTime >= 0 && trackIdx < 10) {
    const env = componentInfo.env;
    const name = componentInfo.name;
    const isPrimaryEnv = env === rootEnv;
    const selfTime = endTime - startTime;
    const color =
      selfTime < 0.5
        ? isPrimaryEnv
          ? 'primary-light'
          : 'secondary-light'
        : selfTime < 50
          ? isPrimaryEnv
            ? 'primary'
            : 'secondary'
          : selfTime < 500
            ? isPrimaryEnv
              ? 'primary-dark'
              : 'secondary-dark'
            : 'error';
    const entryName =
      isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
    const debugTask = componentInfo.debugTask;
    const measureName = '\u200b' + entryName;
    if (__DEV__ && debugTask) {
      const properties: Array<[string, string]> = [];
      if (componentInfo.key != null) {
        addValueToProperties('key', componentInfo.key, properties, 0, '');
      }
      if (componentInfo.props != null) {
        addObjectToProperties(componentInfo.props, properties, 0, '');
      }

      debugTask.run(
        // $FlowFixMe[method-unbinding]
        performance.measure.bind(performance, measureName, {
          start: startTime < 0 ? 0 : startTime,
          end: childrenEndTime,
          detail: {
            devtools: {
              color: color,
              track: trackNames[trackIdx],
              trackGroup: COMPONENTS_TRACK,
              properties,
            },
          },
        }),
      );
      performance.clearMeasures(measureName);
    } else {
      console.timeStamp(
        measureName,
        startTime < 0 ? 0 : startTime,
        childrenEndTime,
        trackNames[trackIdx],
        COMPONENTS_TRACK,
        color,
      );
    }
  }
}