Benchmark: React useCallback 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() {
  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');
}


const testFunctionInlineOutside = function(evt) {
  return evt.preventDefault();
}
function ComponentWithInlineFunctionOutside() {
  return React.createElement('button', {onClick: testFunctionInlineOutside}, 'Test click');
}

const testFunctionArrowOutside = (evt) => {
  evt.preventDefault();
}
function ComponentWithArrowFunctionOutside() {
  return React.createElement('button', {onClick: testFunctionArrowOutside}, '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

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	456073.2 Ops/sec
ComponentWithUseCallback	472921.7 Ops/sec
ComponentWithInlineFunction	393054.7 Ops/sec
ComponentWithArrowFunction	398744.8 Ops/sec
ComponentWithInlineFunctionOutside	517147.4 Ops/sec
ComponentWithArrowFunctionOutside	514901.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches in JavaScript microbenchmarks like this is crucial for React developers, especially when optimizing component code.

**What is tested?**

The provided JSON represents six individual test cases that compare the performance of different methods to create and use functions or arrow functions within React's `useCallback` hook:

1.  `ComponentWithOuterFunctionUseCallback`: Uses a regular function (`testFunction`) inside the `React.useCallback` hook.
2.  `ComponentWithUseCallback`: Uses an arrow function (`testFunction`) inside the `React.useCallback` hook.
3.  `ComponentWithInlineFunction`: Uses a regular function (`testFunction`) without creating it as part of the `useCallback` hook.
4.  `ComponentWithArrowFunction`: Uses an arrow function (`testFunction`) without creating it as part of the `useCallback` hook.
5.  `ComponentWithInlineFunctionOutside`: Moves the `testFunction` outside the `useCallback` hook and still uses a regular function.
6.  `ComponentWithArrowFunctionOutside`: Moves the `testFunction` outside the `useCallback` hook and still uses an arrow function.

**Comparison of options**

Here are some pros and cons for each approach:

1.  **`ComponentWithOuterFunctionUseCallback`**: This approach has a clear advantage in terms of maintainability, as it keeps the test function outside the `useCallback` hook. However, this results in the function being recreated on every render.
    *   Pros: Easier to read and understand
    *   Cons: Function is recreated on every render

2.  **`ComponentWithUseCallback`**: This approach uses an arrow function (`testFunction`) inside the `React.useCallback` hook, which keeps the function from being recreated on every render.
    *   Pros: The function is not recreated on every render
    *   Cons: Less maintainable due to the use of arrow functions.

3.  **`ComponentWithInlineFunction`**: This approach does not use the `useCallback` hook and instead defines a regular function (`testFunction`) inline.
    *   Pros: Can be less verbose than using `useCallback`.
    *   Cons: Function is recreated on every render due to its inline definition.

4.  **`ComponentWithArrowFunction`**: Similar to `ComponentWithUseCallback`, but uses a regular function defined outside the hook instead of an arrow function.
    *   Pros: The function is not recreated on every render
    *   Cons: May require more boilerplate code than using arrow functions.

5.  **`ComponentWithInlineFunctionOutside`** and **`ComponentWithArrowFunctionOutside`**: These approaches take a similar approach to `ComponentWithOuterFunctionUseCallback`, but without the use of `useCallback`. They move the function outside the hook, keeping it from being recreated on every render.
    *   Pros: Can be less verbose than using `useCallback`.
    *   Cons: Function is not optimized for React's re-renders.

**Which approach to use?**

Based on performance considerations, **`ComponentWithUseCallback`** and its variants (`ComponentWithArrowFunctionOutside`) are the best options. These approaches keep the function from being recreated on every render, resulting in better performance.

On the other hand, if maintainability is a priority but performance isn't critical, **`ComponentWithOuterFunctionUseCallback`** may be the best choice due to its clear and readable code structure.

Keep in mind that for smaller components or in situations where optimization is not crucial, using inline functions (`ComponentWithInlineFunction`) might be sufficient. However, for more complex applications with a large number of React components, performance considerations should take precedence.

Related benchmarks:

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