Benchmark: React useCallback 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>

​x
 
<!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();
    setState('test');
  }
  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(); setState('test');}, []);
  return React.createElement('button', {onClick: testFunction}, 'Test click');
}

function ComponentWithInlineFunction() {
  const [state, setState] = React.useState();
  function testFunction(evt) {
    evt.preventDefault();
    setState('test');
  }
  return React.createElement('button', {onClick: testFunction}, 'Test click');
}

function ComponentWithArrowFunction() {
  const [state, setState] = React.useState();
  const testFunction = (evt) => {
    evt.preventDefault();
    setState('test');
  }
  return React.createElement('button', {onClick: testFunction}, 'Test click');
}


const testFunctionInlineOutside = function(evt, setState) {
  return evt.preventDefault();
  setState('test');
}
function ComponentWithInlineFunctionOutside() {
  const [state, setState] = React.useState();
  return React.createElement('button', {onClick: (evt) => testFunctionArrowOutside(evt, setState)}, 'Test click');
}

const testFunctionArrowOutside = (evt, setState) => {
  evt.preventDefault();
  setState('test');
}
function ComponentWithArrowFunctionOutside() {
  const [state, setState] = React.useState();
  return React.createElement('button', {onClick: (evt) => testFunctionArrowOutside(evt, setState)}, 'Test click');
}

 
function ComponentWithOuterFunctionUseCallback() {  const [state, setState] = React.useState();  function functionToTest(evt) {    evt.preventDefault();    setState('test');  }  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(); setState('test');}, []);  return React.createElement('button', {onClick: testFunction}, 'Test click');}​function ComponentWithInlineFunction() {  const [state, setState] = React.useState();  function testFunction(evt) {    evt.preventDefault();    setState('test');  }  return React.createElement('button', {onClick: testFunction}, 'Test click');}​function ComponentWithArrowFunction() {  const [state, setState] = React.useState();  const testFunction = (evt) => {    evt.preventDefault();    setState('test');  }  return React.createElement('button', {onClick: testFunction}, 'Test click');}​​const testFunctionInlineOutside = function(evt, setState) {  return evt.preventDefault();  setState('test');}function ComponentWithInlineFunctionOutside() {  const [state, setState] = React.useState();  return React.createElement('button', {onClick: (evt) => testFunctionArrowOutside(evt, setState)}, 'Test click');}​const testFunctionArrowOutside = (evt, setState) => {  evt.preventDefault();  setState('test');}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'))
ReactDOM.render(React.createElement(ComponentWithOuterFunctionUseCallback), document.getElementById('root'))
ComponentWithUseCallback
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
ComponentWithInlineFunction
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
ComponentWithArrowFunction
ReactDOM.render(React.createElement(ComponentWithArrowFunction), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithArrowFunction), document.getElementById('root'))
ComponentWithInlineFunctionOutside
ReactDOM.render(React.createElement(ComponentWithInlineFunctionOutside), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithInlineFunctionOutside), document.getElementById('root'))
ComponentWithArrowFunctionOutside
ReactDOM.render(React.createElement(ComponentWithArrowFunctionOutside), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithArrowFunctionOutside), document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
ComponentWithOuterFunctionUseCallback
ComponentWithUseCallback
ComponentWithInlineFunction
ComponentWithArrowFunction
ComponentWithInlineFunctionOutside
ComponentWithArrowFunctionOutside

Fastest: N/A

Slowest: N/A

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	404100.9 Ops/sec
ComponentWithUseCallback	419080.1 Ops/sec
ComponentWithInlineFunction	358398.7 Ops/sec
ComponentWithArrowFunction	358240.9 Ops/sec
ComponentWithInlineFunctionOutside	359661.9 Ops/sec
ComponentWithArrowFunctionOutside	354462.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

I'll break down the benchmark definition and test cases to explain what's being tested.

Benchmark Definition

The benchmark definition is essentially how the React library renders a specific component. The script preparation code defines four different components: ComponentWithOuterFunctionUseCallback, ComponentWithUseCallback, ComponentWithInlineFunction, ComponentWithArrowFunction, ComponentWithInlineFunctionOutside, and ComponentWithArrowFunctionOutside. Each component has a different implementation of the onClick event handler.

Test Cases

There are six test cases, each rendering one of the components defined above. The test case names correspond to the component name. The benchmark definition is executed by rendering the corresponding component using ReactDOM.render.

What's being tested?

The benchmark tests how the React library performs when rendering different types of event handlers: traditional function expressions (e.g., ComponentWithOuterFunctionUseCallback), arrow functions (e.g., ComponentWithArrowFunction), and anonymous function calls with external variables (e.g., ComponentWithInlineFunctionOutside). The test also compares the performance of using a callback function (e.g., ComponentWithUseCallback) versus defining it as an inline function.

Options compared

The benchmark tests three main options:

Traditional function expressions: Using a traditional function expression for the event handler, as in ComponentWithOuterFunctionUseCallback.
Arrow functions: Using an arrow function for the event handler, as in ComponentWithArrowFunction.
Anonymous function calls with external variables: Defining an anonymous function call with external variables, as in ComponentWithInlineFunctionOutside.

The test also includes two additional variants:

Callback function: Using a callback function, as in ComponentWithUseCallback.
Inline functions: Defining the event handler inline, without using a separate named function.

Why is this benchmark interesting?

This benchmark is interesting because it tests how different approaches to event handling affect performance in React. The results can help developers understand which approach is most efficient for their use case and optimize their code accordingly.

The benchmark also highlights the importance of considering the performance implications of coding decisions, even those that may seem minor or trivial at first glance.

LLMs can make mistakes. Check important info.

I'll break down the benchmark definition and test cases to explain what's being tested.

**Benchmark Definition**

The benchmark definition is essentially how the React library renders a specific component. The script preparation code defines four different components: `ComponentWithOuterFunctionUseCallback`, `ComponentWithUseCallback`, `ComponentWithInlineFunction`, `ComponentWithArrowFunction`, `ComponentWithInlineFunctionOutside`, and `ComponentWithArrowFunctionOutside`. Each component has a different implementation of the `onClick` event handler.

**Test Cases**

**What's being tested?**

The benchmark tests how the React library performs when rendering different types of event handlers: traditional function expressions (e.g., `ComponentWithOuterFunctionUseCallback`), arrow functions (e.g., `ComponentWithArrowFunction`), and anonymous function calls with external variables (e.g., `ComponentWithInlineFunctionOutside`). The test also compares the performance of using a callback function (e.g., `ComponentWithUseCallback`) versus defining it as an inline function.

**Options compared**

The benchmark tests three main options:

1. **Traditional function expressions**: Using a traditional function expression for the event handler, as in `ComponentWithOuterFunctionUseCallback`.
2. **Arrow functions**: Using an arrow function for the event handler, as in `ComponentWithArrowFunction`.
3. **Anonymous function calls with external variables**: Defining an anonymous function call with external variables, as in `ComponentWithInlineFunctionOutside`.

The test also includes two additional variants:

1. **Callback function**: Using a callback function, as in `ComponentWithUseCallback`.
2. **Inline functions**: Defining the event handler inline, without using a separate named function.

**Why is this benchmark interesting?**

The benchmark also highlights the importance of considering the performance implications of coding decisions, even those that may seem minor or trivial at first glance.

Related benchmarks:

React useCallback 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 7 months ago):