Run results for: Memoization + useCallback

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Browser: Chrome 106

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Inline + NonMemoized	422343.9 Ops/sec
Inline + Memoized	460664.2 Ops/sec
useCallback + NonMemoized	507606.1 Ops/sec
useCallback + Memoized	640974.4 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 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!');
});

Tests:

Inline + NonMemoized
ReactDOM.render(React.createElement(ComponentWithInlineFunctionAndNonMemoizedButton), document.getElementById('root'))
Inline + Memoized
ReactDOM.render(React.createElement(ComponentWithInlineFunctionAndMemoizedButton), document.getElementById('root'))
useCallback + NonMemoized
ReactDOM.render(React.createElement(ComponentWithUseCallbackAndNonMemoizedButton), document.getElementById('root'))
useCallback + Memoized
ReactDOM.render(React.createElement(ComponentWithUseCallbackAndMemoizedButton), document.getElementById('root'))

Run results for: Memoization + useCallback

Inline + NonMemoized

Inline + Memoized

useCallback + NonMemoized

useCallback + Memoized