processEventDispatch() — react Function Reference

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

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ processEventDispatch() — react Function Reference

Dependency Diagram

graph TD
  c2290671_5bbb_a7c0_6eb6_947d1b9ad107["processEventDispatch()"]
  a3f7147d_da0b_56dc_ffc9_a9e2bbc4526a["preprocessData.js"]
  c2290671_5bbb_a7c0_6eb6_947d1b9ad107 -->|defined in| a3f7147d_da0b_56dc_ffc9_a9e2bbc4526a
  7e379096_4ef1_e90c_7e2b_b822b6321992["processTimelineEvent()"]
  7e379096_4ef1_e90c_7e2b_b822b6321992 -->|calls| c2290671_5bbb_a7c0_6eb6_947d1b9ad107
  style c2290671_5bbb_a7c0_6eb6_947d1b9ad107 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/import-worker/preprocessData.js lines 231–292

function processEventDispatch(
  event: TimelineEvent,
  timestamp: Milliseconds,
  profilerData: TimelineData,
  state: ProcessorState,
) {
  const data = event.args.data;
  const type = data.type;

  if (type.startsWith('react-')) {
    const stackTrace = data.stackTrace;
    if (stackTrace) {
      const topFrame = stackTrace[stackTrace.length - 1];
      if (topFrame.url.includes('/react-dom.')) {
        // Filter out fake React events dispatched by invokeGuardedCallbackDev.
        return;
      }
    }
  }

  // Reduce noise from events like DOMActivate, load/unload, etc. which are usually not relevant
  if (
    type === 'blur' ||
    type === 'click' ||
    type === 'input' ||
    type.startsWith('focus') ||
    type.startsWith('key') ||
    type.startsWith('mouse') ||
    type.startsWith('pointer')
  ) {
    const duration = event.dur / 1000;

    let depth = 0;

    while (state.nativeEventStack.length > 0) {
      const prevNativeEvent =
        state.nativeEventStack[state.nativeEventStack.length - 1];
      const prevStopTime = prevNativeEvent.timestamp + prevNativeEvent.duration;

      if (timestamp < prevStopTime) {
        depth = prevNativeEvent.depth + 1;
        break;
      } else {
        state.nativeEventStack.pop();
      }
    }

    const nativeEvent = {
      depth,
      duration,
      timestamp,
      type,
      warning: null,
    };

    profilerData.nativeEvents.push(nativeEvent);

    // Keep track of curent event in case future ones overlap.
    // We separate them into different vertical lanes in this case.
    state.nativeEventStack.push(nativeEvent);
  }
}