<html>
<head>
<title>This is the title of the webpage!</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
</body>
</html>
function ComponentWithOuterFunctionUseCallback() {
const [state, setState] = React.useState();
function functionToTest(evt) {
evt.preventDefault();
const period = "20231105010814-1";
const periodRegex = /^\d{14}-\d+$/;
if (!periodRegex.test(period)) {
throw new Error("Invalid period format.");
}
const [start, end] = period.split("-").map(Number);
if (isNaN(start) || isNaN(end) || start >= end) {
throw new Error("Invalid start or end value.");
}
const randomNumber = Math.floor(Math.random() * (end - start + 1)) + start;
setState(randomNumber);
}
const testFunction = React.useCallback(functionToTest, []);
return React.createElement('button', {onClick: testFunction}, 'Test click');
}
function ComponentWithUseCallback() {
const [state, setState] = React.useState();
const testFunction = React.useCallback(
evt => {
evt.preventDefault();
const period = "20231105010814-1";
const periodRegex = /^\d{14}-\d+$/;
if (!periodRegex.test(period)) {
throw new Error("Invalid period format.");
}
const [start, end] = period.split("-").map(Number);
if (isNaN(start) || isNaN(end) || start >= end) {
throw new Error("Invalid start or end value.");
}
const randomNumber = Math.floor(Math.random() * (end - start + 1)) + start;
setState(randomNumber);
},
[]
);
return React.createElement('button', {onClick: testFunction}, 'Test click');
}
function ComponentWithInlineFunction() {
const [state, setState] = React.useState();
function testFunction(evt) {
evt.preventDefault();
const period = "20231105010814-1";
const periodRegex = /^\d{14}-\d+$/;
if (!periodRegex.test(period)) {
throw new Error("Invalid period format.");
}
const [start, end] = period.split("-").map(Number);
if (isNaN(start) || isNaN(end) || start >= end) {
throw new Error("Invalid start or end value.");
}
const randomNumber = Math.floor(Math.random() * (end - start + 1)) + start;
setState(randomNumber);
}
return React.createElement('button', {onClick: testFunction}, 'Test click');
}
function ComponentWithArrowFunction() {
const [state, setState] = React.useState();
const testFunction = (evt) => {
evt.preventDefault();
const period = "20231105010814-1";
const periodRegex = /^\d{14}-\d+$/;
if (!periodRegex.test(period)) {
throw new Error("Invalid period format.");
}
const [start, end] = period.split("-").map(Number);
if (isNaN(start) || isNaN(end) || start >= end) {
throw new Error("Invalid start or end value.");
}
const randomNumber = Math.floor(Math.random() * (end - start + 1)) + start;
setState(randomNumber);
}
return React.createElement('button', {onClick: testFunction}, 'Test click');
}
const testFunctionInlineOutside = function(evt, setState) {
return evt.preventDefault();
const period = "20231105010814-1";
const periodRegex = /^\d{14}-\d+$/;
if (!periodRegex.test(period)) {
throw new Error("Invalid period format.");
}
const [start, end] = period.split("-").map(Number);
if (isNaN(start) || isNaN(end) || start >= end) {
throw new Error("Invalid start or end value.");
}
const randomNumber = Math.floor(Math.random() * (end - start + 1)) + start;
setState(randomNumber);
}
function ComponentWithInlineFunctionOutside() {
const [state, setState] = React.useState();
return React.createElement('button', {onClick: (evt) => testFunctionArrowOutside(evt, setState)}, 'Test click');
}
const testFunctionArrowOutside = (evt, setState) => {
evt.preventDefault();
const period = "20231105010814-1";
const periodRegex = /^\d{14}-\d+$/;
if (!periodRegex.test(period)) {
throw new Error("Invalid period format.");
}
const [start, end] = period.split("-").map(Number);
if (isNaN(start) || isNaN(end) || start >= end) {
throw new Error("Invalid start or end value.");
}
const randomNumber = Math.floor(Math.random() * (end - start + 1)) + start;
setState(randomNumber);
}
function ComponentWithArrowFunctionOutside() {
const [state, setState] = React.useState();
return React.createElement('button', {onClick: (evt) => testFunctionArrowOutside(evt, setState)}, 'Test click');
}
ReactDOM.render(React.createElement(ComponentWithOuterFunctionUseCallback), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithArrowFunction), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithInlineFunctionOutside), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithArrowFunctionOutside), document.getElementById('root'))
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
ComponentWithOuterFunctionUseCallback | |
ComponentWithUseCallback | |
ComponentWithInlineFunction | |
ComponentWithArrowFunction | |
ComponentWithInlineFunctionOutside | |
ComponentWithArrowFunctionOutside |
Test name | Executions per second |
---|---|
ComponentWithOuterFunctionUseCallback | 395204.8 Ops/sec |
ComponentWithUseCallback | 407350.7 Ops/sec |
ComponentWithInlineFunction | 355689.8 Ops/sec |
ComponentWithArrowFunction | 353560.9 Ops/sec |
ComponentWithInlineFunctionOutside | 355694.2 Ops/sec |
ComponentWithArrowFunctionOutside | 360006.7 Ops/sec |
It looks like we have some benchmarking results to analyze!
To answer your question, I'll provide an analysis of the latest benchmark result.
The latest benchmark result is:
"[ { "RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", "Browser": "Chrome 119", "DevicePlatform": "Desktop", "OperatingSystem": "Mac OS X 10.15.7", "ExecutionsPerSecond": 407350.6875, "TestName": "ComponentWithUseCallback" }, { "RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", "Browser": "Chrome 119", "DevicePlatform": "Desktop", "OperatingSystem": "Mac OS X 10.15.7", "ExecutionsPerSecond": 395204.84375, "TestName": "ComponentWithOuterFunctionUseCallback" }, { "RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", "Browser": "Chrome 119", "DevicePlatform": "Desktop", "OperatingSystem": "Mac OS X 10.15.7", "ExecutionsPerSecond": 360006.6875, "TestName": "ComponentWithArrowFunctionOutside" }, { "RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", "Browser": "Chrome 119", "DevicePlatform": "Desktop", "OperatingSystem": "Mac OS X 10.15.7", "ExecutionsPerSecond": 355694.25, "TestName": "ComponentWithInlineFunctionOutside" }, { "RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", "Browser": "Chrome 119", "DevicePlatform": "Desktop", "OperatingSystem": "Mac OS X 10.15.7", "ExecutionsPerSecond": 355689.8125, "TestName": "ComponentWithInlineFunction" }, { "RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", "Browser": "Chrome 119", "DevicePlatform": "Desktop", "OperatingSystem": "Mac OS X 10.15.7", "ExecutionsPerSecond": 353560.9375, "TestName": "ComponentWithArrowFunction" } ]"
The results show that:
ComponentWithUseCallback
has the highest number of executions per second (407350.6875), indicating it is likely the fastest.ComponentWithOuterFunctionUseCallback
and ComponentWithInlineFunction
have similar execution rates (395204.84375 and 360006.6875, respectively).ComponentWithArrowFunctionOutside
and ComponentWithInlineFunctionOutside
have lower execution rates (355694.25 and 355689.8125, respectively).It appears that using a callback function (ComponentWithUseCallback
) results in the best performance, followed closely by using an outer function (ComponentWithOuterFunctionUseCallback
). The use of inline functions (ComponentWithInlineFunction
) results in slightly slower execution rates.
The use of arrow functions outside of functional components (ComponentWithArrowFunctionOutside
) and inside functional components with no outer function (ComponentWithInlineFunctionOutside
) also result in lower performance compared to the other options.