Run results for: React Hooks vs. Inline, useMemo, memo

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser: Chrome 146

Operating system: Linux

Device Platform: Desktop

Date tested: 4 months ago

Hooks

1.7M/s

With useMemo

1.6M/s

Inline Function

1.3M/s

Child without memo

906K/s

Child with memo

901K/s

Without useMemo

844K/s

View exact numbers

Test name	Executions per second
✓ Hooks	1,681,858 Ops/sec
With useMemo	1,571,417 Ops/sec
Inline Function	1,253,344 Ops/sec
Child without memo	906,209 Ops/sec
Child with memo	900,550 Ops/sec
Without useMemo	844,349 Ops/sec

HTML Preparation code:

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

Script Preparation code:

function ComponentWithInlineFunction() {
    const clickMe = () => {};
    return React.createElement('button', {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithUseCallback() {
    const clickMe = React.useCallback(() => {}, []);
    return React.createElement('button', {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithoutUseMemo() {
    const obj = {
        x: 1,
        y: 1
    };
    return React.createElement('h1', {
        data: obj
    }, 'ComponentWithoutUseMemo');
}

function ComponentWithUseMemo() {
    const obj = React.useMemo(() => ({
        x: 1,
        y: 1
    }), []);
    return React.createElement('h1', {
        data: obj
    }, 'ComponentWithUseMemo');
}

const ChildWithoutMemo = () => {
    return React.createElement('div', null, null);
}

const ChildWithMemo = React.memo(ChildWithoutMemo);

function ComponentWithoutMemorizedChild() {
    const [count, setCount] = React.useState(0);
    React.useEffect(() => {
        if (count < 10000) {
            setCount(c => c + 1);
        }
    })
    return React.createElement(ChildWithoutMemo, null, null);
}

function ComponentWithMemorizedChild() {
    const [count, setCount] = React.useState(0);
    React.useEffect(() => {
        if (count < 10000) {
            setCount(c => c + 1);
        }
    })
    return React.createElement(ChildWithMemo, null, null);
}

Tests:

Inline Function
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
Hooks
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
Without useMemo
ReactDOM.render(React.createElement(ComponentWithoutUseMemo), document.getElementById('root'))
With useMemo
ReactDOM.render(React.createElement(ComponentWithUseMemo), document.getElementById('root'))
Child without memo
ReactDOM.render(React.createElement(ComponentWithoutMemorizedChild), document.getElementById('root'))
Child with memo
ReactDOM.render(React.createElement(ComponentWithMemorizedChild), document.getElementById('root'))