measurePerformance() — react Function Reference

Architecture documentation for the measurePerformance() function in runtimePerf.ts from the react codebase.

Function typescript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ measurePerformance() — react Function Reference

Dependency Diagram

graph TD
  1c4e507e_4ef7_2552_475e_1d13bbcd9d49["measurePerformance()"]
  a990453a_7717_776a_17fd_03fd2fdb9e90["runtimePerf.ts"]
  1c4e507e_4ef7_2552_475e_1d13bbcd9d49 -->|defined in| a990453a_7717_776a_17fd_03fd2fdb9e90
  73c3c58d_8d75_3991_3043_5d1fae4a0c23["buildHtml()"]
  1c4e507e_4ef7_2552_475e_1d13bbcd9d49 -->|calls| 73c3c58d_8d75_3991_3043_5d1fae4a0c23
  88dc5f8f_5bbd_d8ea_f71a_43639eddc212["delay()"]
  1c4e507e_4ef7_2552_475e_1d13bbcd9d49 -->|calls| 88dc5f8f_5bbd_d8ea_f71a_43639eddc212
  style 1c4e507e_4ef7_2552_475e_1d13bbcd9d49 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/react-mcp-server/src/tools/runtimePerf.ts lines 56–199

export async function measurePerformance(
  code: string,
  iterations: number,
): Promise<PerformanceResults> {
  const babelOptions: babel.TransformOptions = {
    filename: 'anonymous.tsx',
    configFile: false,
    babelrc: false,
    presets: [babelPresetTypescript, babelPresetEnv, babelPresetReact],
  };

  const parsed = await babel.parseAsync(code, babelOptions);
  if (!parsed) {
    throw new Error('Failed to parse code');
  }

  const transformResult = await babel.transformFromAstAsync(parsed, undefined, {
    ...babelOptions,
    plugins: [
      () => ({
        visitor: {
          ImportDeclaration(
            path: babel.NodePath<babel.types.ImportDeclaration>,
          ) {
            const value = path.node.source.value;
            if (value === 'react' || value === 'react-dom') {
              path.remove();
            }
          },
        },
      }),
    ],
  });

  const transpiled = transformResult?.code || undefined;
  if (!transpiled) {
    throw new Error('Failed to transpile code');
  }

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({width: 1280, height: 720});
  const html = buildHtml(transpiled);

  let performanceResults: PerformanceResults = {
    renderTime: [],
    webVitals: {
      cls: [],
      lcp: [],
      inp: [],
      fid: [],
      ttfb: [],
    },
    reactProfiler: {
      id: [],
      phase: [],
      actualDuration: [],
      baseDuration: [],
      startTime: [],
      commitTime: [],
    },
    error: null,
  };

  for (let ii = 0; ii < iterations; ii++) {
    await page.setContent(html, {waitUntil: 'networkidle0'});
    await page.waitForFunction(
      'window.__RESULT__ !== undefined && (window.__RESULT__.renderTime !== null || window.__RESULT__.error !== null)',
    );

    // ui chaos monkey
    const selectors = await page.evaluate(() => {
      window.__INTERACTABLE_SELECTORS__ = [];
      const elements = Array.from(document.querySelectorAll('a')).concat(
        Array.from(document.querySelectorAll('button')),
      );
      for (const el of elements) {
        window.__INTERACTABLE_SELECTORS__.push(el.tagName.toLowerCase());
      }
      return window.__INTERACTABLE_SELECTORS__;
    });