HTML Preparation code:
AخA
 
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
3
<div id="root"></div>
Script Preparation code:
x
 
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'))
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    Inline Function
    Hooks
    Without useMemo
    With useMemo
    Child without memo
    Child with memo

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 10 months ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Chrome 122 on Windows
View result in a separate tab
Test name Executions per second
Inline Function 415913.5 Ops/sec
Hooks 514671.5 Ops/sec
Without useMemo 264508.4 Ops/sec
With useMemo 512767.3 Ops/sec
Child without memo 290595.8 Ops/sec
Child with memo 314925.8 Ops/sec