Run results for: Memoization + useCallback (II)

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	469312.0 Ops/sec
Inline + Memoized	466394.7 Ops/sec
useCallback + NonMemoized	516924.0 Ops/sec
useCallback + Memoized	657044.7 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!');
});

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)

Run results for: Memoization + useCallback (II)

Inline + NonMemoized

Inline + Memoized

useCallback + NonMemoized

useCallback + Memoized