diff --git a/benchmark/index.js b/benchmark/index.js
index 0e33ac23fb57f5..e30c8718f0fb78 100644
--- a/benchmark/index.js
+++ b/benchmark/index.js
@@ -1,5 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
// Get all the scenarios
const requirePerfScenarios = require.context('./scenarios', true, /(js|ts|tsx)$/);
@@ -10,4 +11,32 @@ const scenarioSuitePath = window.location.search.replace('?', '');
const Component = requirePerfScenarios(scenarioSuitePath).default;
-ReactDOM.render(, rootEl);
+const start = performance.now();
+let end;
+
+function TestCase(props) {
+ const ref = React.useRef(null);
+
+ React.useLayoutEffect(() => {
+ // Force layout
+ ref.current.getBoundingClientRect();
+
+ end = performance.now();
+ window.timing = {
+ render: end - start,
+ };
+ });
+
+ return
{props.children}
;
+}
+
+TestCase.propTypes = {
+ children: PropTypes.node,
+};
+
+ReactDOM.render(
+
+
+ ,
+ rootEl,
+);
diff --git a/benchmark/scripts/benchmark.js b/benchmark/scripts/benchmark.js
index 20c3a3e7da4afd..794ff241e2d60a 100644
--- a/benchmark/scripts/benchmark.js
+++ b/benchmark/scripts/benchmark.js
@@ -1,7 +1,6 @@
/* eslint-disable no-console */
/* eslint-disable no-await-in-loop */
const puppeteer = require('puppeteer');
-const { performance } = require('perf_hooks');
const handler = require('serve-handler');
const http = require('http');
@@ -76,11 +75,11 @@ async function runMeasures(browser, testCaseName, testCase, times) {
const measures = [];
for (let i = 0; i < times; i += 1) {
- const page = await browser.openPage(`http://localhost:${PORT}/${APP}?${testCase}`);
+ const url = `http://localhost:${PORT}/${APP}?${testCase}`;
+ const page = await browser.openPage(url);
const benchmark = await page.evaluate(() => {
- const { loadEventEnd, navigationStart } = performance.timing;
- return loadEventEnd - navigationStart;
+ return window.timing.render;
});
measures.push(benchmark);