Benchmark: React17: React useCallback vs notUseCallback

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/17.0.2/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
	<div id="root"></div> 
  </body>
</html>

Script Preparation code:

function ComponentWithOutUseCallback() {
  const testFunction = (evt) => evt.preventDefault()
  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');
}

Tests:

Without useCallback
ReactDOM.render(React.createElement(ComponentWithOutUseCallback), document.getElementById('root'))
With useCallback
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Without useCallback
With useCallback

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 117 on Windows

View result in a separate tab

Test name	Executions per second
Without useCallback	717167.1 Ops/sec
With useCallback	846331.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance difference between two approaches in React: using `useCallback` and not using it.

**Script Preparation Code Explanation**

The script preparation code defines two React components:

1. `ComponentWithOutUseCallback`: This component has a functional `testFunction` that prevents default behavior when called.
2. `ComponentWithUseCallback`: This component uses `React.useCallback` to memoize the `testFunction`, which is similar to the first component.

The purpose of these components is to test the performance impact of using `useCallback` on React's component lifecycle.

**Options Comparison**

There are two options being compared:

1. **Without useCallback**: This option renders the `ComponentWithOutUseCallback` component without memoizing its `testFunction`.
2. **With useCallback**: This option renders the `ComponentWithUseCallback` component, which uses `useCallback` to memoize its `testFunction`.

**Pros and Cons**

* **Using `useCallback` (With useCallback)**:
	+ Pros: Memoization can improve performance by reducing unnecessary re-renders.
	+ Cons: It adds extra complexity and potential overhead due to the memoization process.
* **Not using `useCallback` (Without useCallback)**:
	+ Pros: Simple and lightweight, with no additional overhead.
	+ Cons: Can lead to more frequent re-renders, potentially impacting performance.

**Library Used**

The benchmark uses React library version 17.0.2. The `React.useCallback` function is a part of the React library, which provides memoization for functional components.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes used in this benchmark. It only focuses on the performance comparison between two approaches using `useCallback`.

**Other Considerations**

* The benchmark uses Chrome 117 as the browser, which might affect the results.
* The test is run on a desktop platform with Windows operating system.
* The number of executions per second is provided for each test case.

**Alternative Approaches**

If you want to explore alternative approaches, consider the following:

1. **Use `React.memo` instead of `useCallback`**: This can be used as an alternative to memoization in functional components.
2. **Use `React.PureComponent` instead of `FunctionalComponent`**: This can also provide some level of optimization by reducing unnecessary re-renders.

Note that these alternatives might not provide the same level of performance benefits as using `useCallback`, but they can offer different trade-offs and use cases.

Related benchmarks:

React17: React useCallback vs notUseCallback (version: 0)

Comparing performance of: Without useCallback vs With useCallback

Created: one year ago by: Guest

Jump to the latest result

Without useCallback

With useCallback

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):