Benchmark: Memoization + useCallback (II)

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 ComponentWithInlineFunctionAndNonMemoizedButton() {
    const [state, setState] = React.useState(0);
    const clickMe = evt => {
        evt.preventDefault();
        setState(function(existingState){
          // Trigger re-render each time
          return existingState + 1;
        });
    }
    return React.createElement(NonMemoizedButton, {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithInlineFunctionAndMemoizedButton() {
    const [state, setState] = React.useState(0);
    const clickMe = evt => {
        evt.preventDefault();
        setState(function(existingState){
          // Trigger re-render each time
          return existingState + 1;
        });
    }
    return React.createElement(MemoizedButton, {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithUseCallbackAndNonMemoizedButton() {
    const [state, setState] = React.useState(0);
    const clickMe = React.useCallback(evt => {
        evt.preventDefault();
        setState(function(existingState){
          // Trigger re-render each time
          return existingState + 1;
        });
    }, []);
    return React.createElement(NonMemoizedButton, {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithUseCallbackAndMemoizedButton() {
    const [state, setState] = React.useState(0);
    const clickMe = React.useCallback(evt => {
        evt.preventDefault();
        setState(function(existingState){
          // Trigger re-render each time
          return existingState + 1;
        });
    }, []);
    return React.createElement(MemoizedButton, {
        onClick: clickMe
    }, 'Click me!');
}

function NonMemoizedButton (props) {
    const { a, b, c, d, e, f, g, h, i, j, k, l, m, n, onClick } = props;
    const classes = ["some", "joined", "words", "in", "an", "array"]
    return React.createElement('button', {
        className: classes.join(" "),
        onClick: onClick
    }, 'Click me!');
}

const MemoizedButton = React.memo(function MemoizedWrapperComponent (props) {
    const { a, b, c, d, e, f, g, h, i, j, k, l, m, n, onClick } = props;
    const classes = ["some", "joined", "words", "in", "an", "array"]
    return React.createElement('button', {
        className: classes.join(" "),
        onClick: onClick
    }, 'Click me!');
});

window.rootElem = document.getElementById('root');

Tests:

Inline + NonMemoized
ReactDOM.render(React.createElement(ComponentWithInlineFunctionAndNonMemoizedButton), window.rootElem)
Inline + Memoized
ReactDOM.render(React.createElement(ComponentWithInlineFunctionAndMemoizedButton), window.rootElem)
useCallback + NonMemoized
ReactDOM.render(React.createElement(ComponentWithUseCallbackAndNonMemoizedButton), window.rootElem)
useCallback + Memoized
ReactDOM.render(React.createElement(ComponentWithUseCallbackAndMemoizedButton), window.rootElem)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Inline + NonMemoized
Inline + Memoized
useCallback + NonMemoized
useCallback + Memoized

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Inline + NonMemoized	380588.6 Ops/sec
Inline + Memoized	400253.9 Ops/sec
useCallback + NonMemoized	424851.9 Ops/sec
useCallback + Memoized	555124.1 Ops/sec

Memoization + useCallback (II) (version: 0)

Comparing performance of: Inline + NonMemoized vs Inline + Memoized vs useCallback + NonMemoized vs useCallback + Memoized

Created: one year ago by: Registered User

Jump to the latest result

Inline + NonMemoized

Inline + Memoized

useCallback + NonMemoized

useCallback + Memoized

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A