Benchmark: React useCallback vs inline function vs inline handler

HTML Preparation code:

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

Script Preparation code:


function ComponentWithInlineFunction() {
    const [state, setState] = React.useState('test');
    const clickMe = evt => {
        evt.preventDefault();
        console.log(state);
    }
    return React.createElement('button', {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithUseCallback() {
    const [state, setState] = React.useState('test');
    const clickMe = React.useCallback(evt => {
        evt.preventDefault();
        console.log(state);
    }, [state]);
    return React.createElement('button', {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithInlineClick() {
    const [state, setState] = React.useState('test');

    return React.createElement('button', {
        onClick: (e) => {
            evt.preventDefault();
            console.log(state);
        },
    }, 'Click me!');
}

Tests:

Inline function
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
Hooks
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
Inline code
ReactDOM.render(React.createElement(ComponentWithInlineClick), document.getElementById('root'))

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Hooks

1.3M/s

Inline function

841K/s

Inline code

814K/s

Fastest: Hooks (1.6x faster)

View exact numbers

✓ Hooks: 1,288,966 ops/sec
• Inline function: 840,623 ops/sec
• Inline code: 814,052 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
Inline function
Hooks
Inline code

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/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Hooks

1.5M/s

Inline function

1.2M/s

Inline code

1.2M/s

View exact numbers

Test name	Executions per second
✓ Hooks	1,463,230 Ops/sec
Inline function	1,188,015 Ops/sec
Inline code	1,174,405 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON.

The benchmark is comparing three different approaches to handle events in React applications:

1. **`React useCallback`**: This hook allows you to memoize a function so that it's not recreated every time the component re-renders. In this case, `clickMe` is a function that prevents default behavior and logs the state.
2. **Inline function**: This approach uses an inline function definition, which is a simple and concise way to define a small function. In this case, the `clickMe` function is defined directly in the JSX.
3. **Inline code with ES6 syntax**: This approach uses an inline function definition with ES6 syntax, similar to the inline function approach. However, it uses the arrow function syntax (`(e) => { ... }`) instead of the traditional function syntax.

Here are some pros and cons of each approach:

* `React useCallback`:
	+ Pros: Reduces unnecessary re-renders of the component, can improve performance.
	+ Cons: Can make code harder to read if not used carefully. Requires understanding of memoization.
* Inline function:
	+ Pros: Simple and concise, easy to read and write. Does not require any special libraries or knowledge.
	+ Cons: May lead to unnecessary re-renders of the component if not used carefully.
* Inline code with ES6 syntax:
	+ Pros: Similar to inline functions, but with a more modern and expressive syntax.
	+ Cons: Requires basic understanding of ES6 syntax.

Now, let's talk about some other considerations:

* **Function call overhead**: The benchmark may also be affected by the overhead of calling a function. In this case, all three approaches involve calling `clickMe`, so this shouldn't be a significant factor.
* **State management**: The benchmark does not include any complex state management scenarios. If you're dealing with large amounts of data or complex state transitions, this may impact the performance differences between these approaches.

Finally, let's talk about some other alternatives:

* **Using a higher-order component (HOC)**: Instead of using `React useCallback` or inline functions, you could use a HOC to wrap your component and provide the `clickMe` function. This can be a useful technique for handling events in React.
* **Using a custom event handler library**: There are libraries available that provide optimized event handling mechanisms, such as react-event-handler. These libraries can be used instead of relying on React's built-in event handling features.

In summary, the benchmark is comparing three different approaches to handle events in React applications: `React useCallback`, inline functions, and inline code with ES6 syntax. Each approach has its pros and cons, and understanding these differences can help you choose the best approach for your use case.

React useCallback vs inline function vs inline handler (version: 0)

Comparing performance of: `Inline function vs Hooks vs Inline code`

Created: 3 years ago by: Registered User

Go to the latest result

Inline function

Hooks

Inline code

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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 vs inline function vs inline handler (version: 0)

Comparing performance of: Inline function vs Hooks vs Inline code

Created: 3 years ago by: Registered User

Go to the latest result

Inline function

Hooks

Inline code

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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: `Inline function vs Hooks vs Inline code`