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

processReactComponentMeasure() — react Function Reference

Architecture documentation for the processReactComponentMeasure() function in preprocessData.js from the react codebase.

Function javascript BabelCompiler Validation calls 2 called by 1

Entity Profile

Dependency Diagram

graph TD
  4742a5ec_80ec_cb9d_6adb_2dfcc87c1cee["processReactComponentMeasure()"]
  a3f7147d_da0b_56dc_ffc9_a9e2bbc4526a["preprocessData.js"]
  4742a5ec_80ec_cb9d_6adb_2dfcc87c1cee -->|defined in| a3f7147d_da0b_56dc_ffc9_a9e2bbc4526a
  7e379096_4ef1_e90c_7e2b_b822b6321992["processTimelineEvent()"]
  7e379096_4ef1_e90c_7e2b_b822b6321992 -->|calls| 4742a5ec_80ec_cb9d_6adb_2dfcc87c1cee
  371f8c85_18ec_cf51_8781_4c5301a82564["assertNoOverlappingComponentMeasure()"]
  4742a5ec_80ec_cb9d_6adb_2dfcc87c1cee -->|calls| 371f8c85_18ec_cf51_8781_4c5301a82564
  922e88f6_6e1f_c3a1_f9b4_dbc80e0f0b08["assertCurrentComponentMeasureType()"]
  4742a5ec_80ec_cb9d_6adb_2dfcc87c1cee -->|calls| 922e88f6_6e1f_c3a1_f9b4_dbc80e0f0b08
  style 4742a5ec_80ec_cb9d_6adb_2dfcc87c1cee fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/import-worker/preprocessData.js lines 831–953

function processReactComponentMeasure(
  name: string,
  startTime: Milliseconds,
  currentProfilerData: TimelineData,
  state: ProcessorState,
): void {
  if (name.startsWith('--component-render-start-')) {
    const [componentName] = name.slice(25).split('-');

    assertNoOverlappingComponentMeasure(state);

    state.currentReactComponentMeasure = {
      componentName,
      timestamp: startTime,
      duration: 0,
      type: 'render',
      warning: null,
    };
  } else if (name === '--component-render-stop') {
    assertCurrentComponentMeasureType(state, 'render');

    if (state.currentReactComponentMeasure !== null) {
      const componentMeasure = state.currentReactComponentMeasure;
      componentMeasure.duration = startTime - componentMeasure.timestamp;

      state.currentReactComponentMeasure = null;

      currentProfilerData.componentMeasures.push(componentMeasure);
    }
  } else if (name.startsWith('--component-layout-effect-mount-start-')) {
    const [componentName] = name.slice(38).split('-');

    assertNoOverlappingComponentMeasure(state);

    state.currentReactComponentMeasure = {
      componentName,
      timestamp: startTime,
      duration: 0,
      type: 'layout-effect-mount',
      warning: null,
    };
  } else if (name === '--component-layout-effect-mount-stop') {
    assertCurrentComponentMeasureType(state, 'layout-effect-mount');

    if (state.currentReactComponentMeasure !== null) {
      const componentMeasure = state.currentReactComponentMeasure;
      componentMeasure.duration = startTime - componentMeasure.timestamp;

      state.currentReactComponentMeasure = null;

      currentProfilerData.componentMeasures.push(componentMeasure);
    }
  } else if (name.startsWith('--component-layout-effect-unmount-start-')) {
    const [componentName] = name.slice(40).split('-');

    assertNoOverlappingComponentMeasure(state);

    state.currentReactComponentMeasure = {
      componentName,
      timestamp: startTime,
      duration: 0,
      type: 'layout-effect-unmount',
      warning: null,
    };
  } else if (name === '--component-layout-effect-unmount-stop') {
    assertCurrentComponentMeasureType(state, 'layout-effect-unmount');

    if (state.currentReactComponentMeasure !== null) {
      const componentMeasure = state.currentReactComponentMeasure;
      componentMeasure.duration = startTime - componentMeasure.timestamp;

      state.currentReactComponentMeasure = null;

      currentProfilerData.componentMeasures.push(componentMeasure);
    }
  } else if (name.startsWith('--component-passive-effect-mount-start-')) {
    const [componentName] = name.slice(39).split('-');

    assertNoOverlappingComponentMeasure(state);

    state.currentReactComponentMeasure = {

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does processReactComponentMeasure() do?
processReactComponentMeasure() is a function in the react codebase, defined in packages/react-devtools-timeline/src/import-worker/preprocessData.js.
Where is processReactComponentMeasure() defined?
processReactComponentMeasure() is defined in packages/react-devtools-timeline/src/import-worker/preprocessData.js at line 831.
What does processReactComponentMeasure() call?
processReactComponentMeasure() calls 2 function(s): assertCurrentComponentMeasureType, assertNoOverlappingComponentMeasure.
What calls processReactComponentMeasure()?
processReactComponentMeasure() is called by 1 function(s): processTimelineEvent.

Analyze Your Own Codebase

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

Try Supermodel Free