Run results for: React useCallback

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 YaBrowser/22.11.5.709 Yowser/2.5 Safari/537.36

Browser: Yandex Browser 22

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Inline	164052.2 Ops/sec
Hooks	210880.8 Ops/sec

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: (evt) => { clickMe(evt) }
    }, '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!');
}

Tests:

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

Run results for: React useCallback

Inline

Hooks