Benchmark: React useCallback hook vs. function

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() {
  function functionToTest(evt) {
	evt.preventDefault();
  }
  const testFunction = React.useCallback(functionToTest, []);
  return React.createElement('button', {onClick: testFunction}, 'Test click');
}

function ComponentWithUseCallback() {
  const testFunction = React.useCallback(evt => evt.preventDefault(), []);
  return React.createElement('button', {onClick: testFunction}, 'Test click');
}

function ComponentWithInlineFunction() {
  function testFunction(evt) {
    evt.preventDefault();
  }
  return React.createElement('button', {onClick: testFunction}, 'Test click');
}

function ComponentWithArrowFunction() {
  const testFunction = (evt) => {
    evt.preventDefault();
  }
  return React.createElement('button', {onClick: testFunction}, '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'))

Historical Performance Data aggregated from 86 community runs

Desktop Results:

Chrome 62 runs

ComponentWithOuterFunctionUseCallback

833K/s

ComponentWithUseCallback

829K/s

ComponentWithArrowFunction

629K/s

ComponentWithInlineFunction

581K/s

Fastest: ComponentWithOuterFunctionUseCallback (1.4x faster)

View exact numbers

✓ ComponentWithOuterFunctionUseCallback: 832,935 ops/sec
• ComponentWithUseCallback: 829,126 ops/sec
• ComponentWithArrowFunction: 629,043 ops/sec
• ComponentWithInlineFunction: 580,805 ops/sec

Safari 9 runs

ComponentWithUseCallback

1.1M/s

ComponentWithOuterFunctionUseCallback

1.1M/s

ComponentWithInlineFunction

948K/s

ComponentWithArrowFunction

942K/s

Fastest: ComponentWithUseCallback (1.2x faster)

View exact numbers

✓ ComponentWithUseCallback: 1,132,164 ops/sec
• ComponentWithOuterFunctionUseCallback: 1,128,840 ops/sec
• ComponentWithInlineFunction: 947,891 ops/sec
• ComponentWithArrowFunction: 941,970 ops/sec

Firefox 9 runs

ComponentWithUseCallback

574K/s

ComponentWithOuterFunctionUseCallback

551K/s

ComponentWithArrowFunction

462K/s

ComponentWithInlineFunction

452K/s

Fastest: ComponentWithUseCallback (1.3x faster)

View exact numbers

✓ ComponentWithUseCallback: 574,065 ops/sec
• ComponentWithOuterFunctionUseCallback: 550,881 ops/sec
• ComponentWithArrowFunction: 461,808 ops/sec
• ComponentWithInlineFunction: 452,447 ops/sec

Mobile Results:

Chrome 6 runs

ComponentWithUseCallback

666K/s

ComponentWithOuterFunctionUseCallback

659K/s

ComponentWithArrowFunction

348K/s

ComponentWithInlineFunction

285K/s

Fastest: ComponentWithUseCallback (2.3x faster)

View exact numbers

✓ ComponentWithUseCallback: 665,655 ops/sec
• ComponentWithOuterFunctionUseCallback: 659,072 ops/sec
• ComponentWithArrowFunction: 348,016 ops/sec
• ComponentWithInlineFunction: 284,629 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ComponentWithOuterFunctionUseCallback
ComponentWithUseCallback
ComponentWithInlineFunction
ComponentWithArrowFunction

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

ComponentWithUseCallback

2.3M/s

ComponentWithOuterFunctionUseCallback

2.3M/s

ComponentWithInlineFunction

1.6M/s

ComponentWithArrowFunction

1.6M/s

View exact numbers

Test name	Executions per second
✓ ComponentWithUseCallback	2,331,155 Ops/sec
ComponentWithOuterFunctionUseCallback	2,314,070 Ops/sec
ComponentWithInlineFunction	1,573,033 Ops/sec
ComponentWithArrowFunction	1,570,335 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Definition**

The benchmark measures the performance of different approaches to creating and using React function components, specifically:

1. `React.useCallback` with an outer function
2. `React.useCallback` without an outer function (i.e., just a plain callback)
3. A function defined directly within the component (`ComponentWithInlineFunction`)
4. An arrow function assigned to a variable (`ComponentWithArrowFunction`)

**Options Compared**

The benchmark is comparing four different approaches:

1. **Using `React.useCallback` with an outer function**: This approach creates a new function every time the component mounts, wrapping the inner `functionToTest` in an anonymous function that returns it.
2. **Using `React.useCallback` without an outer function**: Similar to the previous option, but without the unnecessary wrapper function.
3. **Defining a function directly within the component**: This approach creates a new function every time the component mounts, defining it as a local variable.
4. **Using an arrow function**: Assigns an arrow function to a variable and returns its reference.

**Pros and Cons of Each Approach**

1. **`React.useCallback` with an outer function**:
	* Pros: Easy to use, provides optimization for memoized functions.
	* Cons: Creates unnecessary wrapper functions, potentially increases memory usage.
2. **`React.useCallback` without an outer function**:
	* Pros: Avoids unnecessary wrapper functions and potential memory issues.
	* Cons: May not provide the same level of optimization as using `useCallback` with an outer function.
3. **Defining a function directly within the component**:
	* Pros: Easy to use, creates a new function every time the component mounts (can be useful for testing).
	* Cons: Creates unnecessary functions, potentially increases memory usage.
4. **Using an arrow function**:
	* Pros: Lightweight and concise, avoids creating unnecessary variables or wrapper functions.
	* Cons: May not provide the same level of optimization as using `useCallback` with an outer function.

**Libraries Used**

None are explicitly mentioned in the provided benchmark definition. However, it's worth noting that React is a JavaScript library used for building user interfaces, and ReactDOM is another dependency used for rendering components to the DOM.

**Special JS Features or Syntax**

The benchmark uses several features of modern JavaScript:

* Arrow functions (`(evt) => { ... }`)
* Function expressions (`function functionToTest(evt) { ... }`)
* The `useCallback` hook from React
* Template literals (`\r\n\tscript src="..."\t\r\n`)

These features are widely supported in modern browsers and environments, but may not work in older browsers or environments that don't support them.

**Other Alternatives**

If you're interested in exploring alternative approaches to this benchmark, consider the following:

* Using a different optimization technique, such as memoizing functions using `useMemo` instead of `useCallback`.
* Comparing performance with other React hooks, such as `useRef` or `useState`.
* Evaluating the performance impact of different DOM rendering techniques, such as server-side rendering (SSR) vs. client-side rendering.
* Investigating the performance characteristics of other JavaScript frameworks or libraries that provide similar functionality to React.

React useCallback hook vs. function (version: 0)

Comparing performance of: `ComponentWithOuterFunctionUseCallback vs ComponentWithUseCallback vs ComponentWithInlineFunction vs ComponentWithArrowFunction`

Created: 4 years ago by: Guest

Go to the latest result

ComponentWithOuterFunctionUseCallback

ComponentWithUseCallback

ComponentWithInlineFunction

ComponentWithArrowFunction

Historical Performance Data aggregated from 86 community runs

Desktop Results:

Chrome 62 runs

Safari 9 runs

Firefox 9 runs

Mobile Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

React useCallback hook vs. function (version: 0)

Comparing performance of: ComponentWithOuterFunctionUseCallback vs ComponentWithUseCallback vs ComponentWithInlineFunction vs ComponentWithArrowFunction

Created: 4 years ago by: Guest

Go to the latest result

ComponentWithOuterFunctionUseCallback

ComponentWithUseCallback

ComponentWithInlineFunction

ComponentWithArrowFunction

Historical Performance Data aggregated from 86 community runs

Desktop Results:

Chrome 62 runs

Safari 9 runs

Firefox 9 runs

Mobile Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `ComponentWithOuterFunctionUseCallback vs ComponentWithUseCallback vs ComponentWithInlineFunction vs ComponentWithArrowFunction`