Benchmark: React useCallback with complex function, setState, hook vs. function vs. external

HTML Preparation code:

<!doctype html>
<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>

Script Preparation code:

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');
}

Tests:

ComponentWithOuterFunctionUseCallback
ReactDOM.render(React.createElement(ComponentWithOuterFunctionUseCallback), document.getElementById('root'))
ComponentWithUseCallback
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
ComponentWithInlineFunction
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
ComponentWithArrowFunction
ReactDOM.render(React.createElement(ComponentWithArrowFunction), document.getElementById('root'))
ComponentWithInlineFunctionOutside
ReactDOM.render(React.createElement(ComponentWithInlineFunctionOutside), document.getElementById('root'))
ComponentWithArrowFunctionOutside
ReactDOM.render(React.createElement(ComponentWithArrowFunctionOutside), document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ComponentWithOuterFunctionUseCallback
ComponentWithUseCallback
ComponentWithInlineFunction
ComponentWithArrowFunction
ComponentWithInlineFunctionOutside
ComponentWithArrowFunctionOutside

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

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.

Latest run results:

Run details: (Test run date: one year ago)

User agent: 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/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

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

Related benchmarks:

React useCallback with complex function, setState, hook vs. function vs. external (version: 0)

Comparing performance of: ComponentWithOuterFunctionUseCallback vs ComponentWithUseCallback vs ComponentWithInlineFunction vs ComponentWithArrowFunction vs ComponentWithInlineFunctionOutside vs ComponentWithArrowFunctionOutside

Created: one year ago by: Guest

Jump to the latest result

ComponentWithOuterFunctionUseCallback

ComponentWithUseCallback

ComponentWithInlineFunction

ComponentWithArrowFunction

ComponentWithInlineFunctionOutside

ComponentWithArrowFunctionOutside

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):