Run results for: useCallback efficiency vs normal function efficiency

Run details:

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

Browser: Chrome 104

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
ComponentWithOuterFunctionUseCallback	14830.6 Ops/sec
ComponentWithUseCallback	14730.3 Ops/sec
ComponentWithInlineFunction	14339.5 Ops/sec
ComponentWithArrowFunction	14509.2 Ops/sec
ComponentWithOuterFunctionUseCallbackV2	15250.3 Ops/sec
ComponentWithUseCallbackV2	15122.2 Ops/sec
ComponentWithInlineFunctionV2	13703.2 Ops/sec
ComponentWithArrowFunctionV2	15068.2 Ops/sec
ComponentWithOuterFunctionUseCallback--2	8233.3 Ops/sec
ComponentWithUseCallback--2	8157.5 Ops/sec
ComponentWithInlineFunction--2	8041.0 Ops/sec
ComponentWithArrowFunction--2	7863.2 Ops/sec
ComponentWithOuterFunctionUseCallbackV2--2	7795.6 Ops/sec
ComponentWithUseCallbackV2--2	8415.3 Ops/sec
ComponentWithInlineFunctionV2--2	8131.8 Ops/sec
ComponentWithArrowFunctionV2--2	8529.6 Ops/sec

HTML Preparation code:

<!doctype html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
  </head>
  <body>
  	<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> 
  </body>
</html>

Script Preparation code:

function ComponentWithOuterFunctionUseCallback(props) {
    const {
        a,
        b,
        c
    } = props;

    function lessExpensiveFunc() {
        return Math.pow(a, 4) + Math.pow(b, 4) + Math.pow(c, 4);
    }
    const testFunction = React.useCallback(lessExpensiveFunc, [a, b, c]);
    return React.createElement('button', {
        onClick: testFunction,
        id: 1
    }, 'Test click');
}

function ComponentWithOuterFunctionUseCallbackV2(props) {
    const {
        a,
        b,
        c
    } = props;

    function simpleFunc() {
        return a+b+c;
    }
    const testFunction = React.useCallback(simpleFunc, [a, b, c]);
    return React.createElement('button', {
        onClick: testFunction,
        id: 5
    }, 'Test click');
}

function ComponentWithUseCallback(props) {
    const {
        a,
        b,
        c
    } = props;

    const lessExpensiveFunc = React.useCallback(() => Math.pow(a, 4) + Math.pow(b, 4) + Math.pow(c, 4), [a, b, c]);
    return React.createElement('button', {
        onClick: lessExpensiveFunc,
        id: 2
    }, 'Test click');
}

function ComponentWithUseCallbackV2(props) {
    const {
        a,
        b,
        c
    } = props;

    const simpleFunc = React.useCallback(() => a+b+c, [a, b, c]);
    return React.createElement('button', {
        onClick: simpleFunc,
        id: 6
    }, 'Test click');
}

function ComponentWithInlineFunction(props) {
    const {
        a,
        b,
        c
    } = props;

    function lessExpensiveFunc() {
        return Math.pow(a, 4) + Math.pow(b, 4) + Math.pow(c, 4);
    }
    return React.createElement('button', {
        onClick: lessExpensiveFunc,
        id: 3
    }, 'Test click');
}

function ComponentWithInlineFunctionV2(props) {
    const {
        a,
        b,
        c
    } = props;

    function simpleFunc() {
        return a+b+c;
    }
    return React.createElement('button', {
        onClick: simpleFunc,
        id: 7
    }, 'Test click');
}

function ComponentWithArrowFunction(props) {
    const {
        a,
        b,
        c
    } = props;

    const lessExpensiveFunc = () => {
        return Math.pow(a, 4) + Math.pow(b, 4) + Math.pow(c, 4);
    }
    return React.createElement('button', {
        onClick: lessExpensiveFunc,
        id: 4
    }, 'Test click');
}

function ComponentWithArrowFunctionV2(props) {
    const {
        a,
        b,
        c
    } = props;

    const simpleFunc = () => {
        return a+b+c;
    }
    return React.createElement('button', {
        onClick: simpleFunc,
        id: 8
    }, 'Test click');
}

Tests:

ComponentWithOuterFunctionUseCallback
ReactDOM.render(React.createElement(ComponentWithOuterFunctionUseCallback, {a:2,b:3,c:4}), document.getElementById('root')) document.getElementById("1").click(); document.getElementById("1").click(); document.getElementById("1").click(); document.getElementById("1").click();
ComponentWithUseCallback
ReactDOM.render(React.createElement(ComponentWithUseCallback, {a:2,b:3,c:4}), document.getElementById('root')) document.getElementById("2").click(); document.getElementById("2").click(); document.getElementById("2").click(); document.getElementById("2").click();
ComponentWithInlineFunction
ReactDOM.render(React.createElement(ComponentWithInlineFunction, {a:2,b:3,c:4}), document.getElementById('root')) document.getElementById("3").click(); document.getElementById("3").click(); document.getElementById("3").click(); document.getElementById("3").click();
ComponentWithArrowFunction
ReactDOM.render(React.createElement(ComponentWithArrowFunction, {a:2,b:3,c:4}), document.getElementById('root')); document.getElementById("4").click(); document.getElementById("4").click(); document.getElementById("4").click(); document.getElementById("4").click();
ComponentWithOuterFunctionUseCallbackV2
ReactDOM.render(React.createElement(ComponentWithOuterFunctionUseCallbackV2, {a:4,b:5,c:6}), document.getElementById('root')) document.getElementById("5").click(); document.getElementById("5").click(); document.getElementById("5").click(); document.getElementById("5").click();
ComponentWithUseCallbackV2
ReactDOM.render(React.createElement(ComponentWithUseCallbackV2, {a:4,b:5,c:6}), document.getElementById('root')) document.getElementById("6").click(); document.getElementById("6").click(); document.getElementById("6").click(); document.getElementById("6").click();
ComponentWithInlineFunctionV2
ReactDOM.render(React.createElement(ComponentWithInlineFunctionV2, {a:4,b:5,c:6}), document.getElementById('root')) document.getElementById("7").click(); document.getElementById("7").click(); document.getElementById("7").click(); document.getElementById("7").click();
ComponentWithArrowFunctionV2
ReactDOM.render(React.createElement(ComponentWithArrowFunctionV2, {a:4,b:5,c:6}), document.getElementById('root')); document.getElementById("8").click(); document.getElementById("8").click(); document.getElementById("8").click(); document.getElementById("8").click();
ComponentWithOuterFunctionUseCallback--2
ReactDOM.render(React.createElement(ComponentWithOuterFunctionUseCallback, {a:2,b:3,c:4}), document.getElementById('root')) document.getElementById("1").click(); document.getElementById("1").click(); document.getElementById("1").click(); document.getElementById("1").click(); document.getElementById("1").click(); document.getElementById("1").click(); document.getElementById("1").click(); document.getElementById("1").click();
ComponentWithUseCallback--2
ReactDOM.render(React.createElement(ComponentWithUseCallback, {a:2,b:3,c:4}), document.getElementById('root')) document.getElementById("2").click(); document.getElementById("2").click(); document.getElementById("2").click(); document.getElementById("2").click(); document.getElementById("2").click(); document.getElementById("2").click(); document.getElementById("2").click(); document.getElementById("2").click();
ComponentWithInlineFunction--2
ReactDOM.render(React.createElement(ComponentWithInlineFunction, {a:2,b:3,c:4}), document.getElementById('root')) document.getElementById("3").click(); document.getElementById("3").click(); document.getElementById("3").click(); document.getElementById("3").click(); document.getElementById("3").click(); document.getElementById("3").click(); document.getElementById("3").click(); document.getElementById("3").click();
ComponentWithArrowFunction--2
ReactDOM.render(React.createElement(ComponentWithArrowFunction, {a:2,b:3,c:4}), document.getElementById('root')); document.getElementById("4").click(); document.getElementById("4").click(); document.getElementById("4").click(); document.getElementById("4").click(); document.getElementById("4").click(); document.getElementById("4").click(); document.getElementById("4").click(); document.getElementById("4").click();
ComponentWithOuterFunctionUseCallbackV2--2
ReactDOM.render(React.createElement(ComponentWithOuterFunctionUseCallbackV2, {a:4,b:5,c:6}), document.getElementById('root')) document.getElementById("5").click(); document.getElementById("5").click(); document.getElementById("5").click(); document.getElementById("5").click(); document.getElementById("5").click(); document.getElementById("5").click(); document.getElementById("5").click(); document.getElementById("5").click();
ComponentWithUseCallbackV2--2
ReactDOM.render(React.createElement(ComponentWithUseCallbackV2, {a:4,b:5,c:6}), document.getElementById('root')) document.getElementById("6").click(); document.getElementById("6").click(); document.getElementById("6").click(); document.getElementById("6").click(); document.getElementById("6").click(); document.getElementById("6").click(); document.getElementById("6").click(); document.getElementById("6").click();
ComponentWithInlineFunctionV2--2
ReactDOM.render(React.createElement(ComponentWithInlineFunctionV2, {a:4,b:5,c:6}), document.getElementById('root')) document.getElementById("7").click(); document.getElementById("7").click(); document.getElementById("7").click(); document.getElementById("7").click(); document.getElementById("7").click(); document.getElementById("7").click(); document.getElementById("7").click(); document.getElementById("7").click();
ComponentWithArrowFunctionV2--2
ReactDOM.render(React.createElement(ComponentWithArrowFunctionV2, {a:4,b:5,c:6}), document.getElementById('root')); document.getElementById("8").click(); document.getElementById("8").click(); document.getElementById("8").click(); document.getElementById("8").click(); document.getElementById("8").click(); document.getElementById("8").click(); document.getElementById("8").click(); document.getElementById("8").click();

Run results for: useCallback efficiency vs normal function efficiency

useCallback efficiency vs normal function efficiency

ComponentWithOuterFunctionUseCallback

ComponentWithUseCallback

ComponentWithInlineFunction

ComponentWithArrowFunction

ComponentWithOuterFunctionUseCallbackV2

ComponentWithUseCallbackV2

ComponentWithInlineFunctionV2

ComponentWithArrowFunctionV2

ComponentWithOuterFunctionUseCallback--2

ComponentWithUseCallback--2

ComponentWithInlineFunction--2

ComponentWithArrowFunction--2

ComponentWithOuterFunctionUseCallbackV2--2

ComponentWithUseCallbackV2--2

ComponentWithInlineFunctionV2--2

ComponentWithArrowFunctionV2--2