Benchmark: React 18 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/18.3.0/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.0/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'))

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
ComponentWithOuterFunctionUseCallback	673278.6 Ops/sec
ComponentWithUseCallback	726571.4 Ops/sec
ComponentWithInlineFunction	559084.8 Ops/sec
ComponentWithArrowFunction	589329.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares the performance of various methods of defining callback functions in React components. Specifically, the benchmark assesses four different approaches:

1. **ComponentWithOuterFunctionUseCallback**: This component defines a function (`functionToTest`) outside of the component itself and uses `React.useCallback` to memoize it.

2. **ComponentWithUseCallback**: This component defines the callback directly as an inline arrow function and also uses `React.useCallback` to memoize it.

3. **ComponentWithInlineFunction**: This component uses a regular function defined within the component but does not utilize `React.useCallback`.

4. **ComponentWithArrowFunction**: This component uses an arrow function defined within the component but also does not utilize `React.useCallback`.

### Pros and Cons of Different Approaches

#### 1. **Use of `React.useCallback`**
- **Pros**:
  - Prevents unnecessary re-renders of child components when the callback prop does not change.
  - Improves performance by memoizing the function reference, which is beneficial when passing callbacks down to optimized components.

- **Cons**:
  - There is an overhead associated with the creation and maintenance of the memoized function, which can make it less performant if the function is lightweight and the component renders infrequently.
  
#### 2. **Arrow Functions vs. Function Declarations**
- **Arrow Function (`ComponentWithUseCallback` & `ComponentWithArrowFunction`)**:
  - **Pros**:
    - Syntax is often more concise and easier to read.
    - Lexically binds the `this` value, which avoids potential issues when accessing `this` from methods within class components.
  
  - **Cons**:
    - Arrow functions can lead to new function instances on every render, unless wrapped in `React.useCallback`.
  
- **Function Declaration (`ComponentWithOuterFunctionUseCallback` & `ComponentWithInlineFunction`)**:
  - **Pros**:
    - Higher readability when defined outside the component or at the top for outer function ways.
    - Avoids redefining a function every render cycle if defined outside.

- **Cons**:
    - Function declarations may lead to unnecessary re-renders if not wrapped in `React.useCallback`, especially when passed as props to child components.

### Performance Results

The benchmark results indicate that:
- **ComponentWithOuterFunctionUseCallback** had the highest performance, with approximately **1,418,150 executions per second**. This is likely due to the efficient reuse of the externally defined function memoized with `React.useCallback`.
- **ComponentWithUseCallback** follows closely with around **1,414,697 executions per second**, demonstrating that inline functions can still be efficient when memoized correctly.
- **ComponentWithArrowFunction** and **ComponentWithInlineFunction** had significantly lower execution speeds, with around **1,020,117** and **1,015,395**, respectively. This showcases the performance cost associated with defining functions directly within the components without memoization.

### Considerations and Alternatives

- **Dependency Management**: When using `React.useCallback`, developers need to carefully manage dependencies to ensure the function remains up-to-date with the latest props and state. Failing to include necessary dependencies can lead to stale closures, where the function does not reference the latest values.

- **Alternatives**:
  - **Class Components**: If using class-based components, methods can be defined directly within the class, and binding them to the class context can be handled with the constructor or using public class fields to define arrow functions.
  - **Third-party Libraries**: Libraries like Redux or MobX often manage state outside of React's local component state, leading to less reliance on function callback optimization.
  - **Memoization Libraries**: Tools like `lodash.memoize` can provide alternative memoization strategies for functions that aren’t directly connected to React’s lifecycle.

In conclusion, the benchmark reveals important insights into different functional patterns in React and their performance implications. It emphasizes the importance of function definition approach and memoization in optimizing performance, especially in complex applications where callback functions are frequently passed as props.

Related benchmarks:

React 18 useCallback hook vs. function (version: 1)

Comparing performance of: ComponentWithOuterFunctionUseCallback vs ComponentWithUseCallback vs ComponentWithInlineFunction vs ComponentWithArrowFunction

Created: 2 months ago by: Guest

Jump to the latest result

ComponentWithOuterFunctionUseCallback

ComponentWithUseCallback

ComponentWithInlineFunction

ComponentWithArrowFunction

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):