Benchmark: useCallback efficiency vs normal function efficiency

useCallback efficiency vs normal function efficiency (version: 0)

useCallback efficiency vs normal function efficiency

Comparing performance of: ComponentWithOuterFunctionUseCallback vs ComponentWithUseCallback vs ComponentWithInlineFunction vs ComponentWithArrowFunction vs ComponentWithOuterFunctionUseCallbackV2 vs ComponentWithUseCallbackV2 vs ComponentWithInlineFunctionV2 vs ComponentWithArrowFunctionV2 vs ComponentWithOuterFunctionUseCallback--2 vs ComponentWithUseCallback--2 vs ComponentWithInlineFunction--2 vs ComponentWithArrowFunction--2 vs ComponentWithOuterFunctionUseCallbackV2--2 vs ComponentWithUseCallbackV2--2 vs ComponentWithInlineFunctionV2--2 vs ComponentWithArrowFunctionV2--2

Created: one year ago by: Registered User

Jump to the latest result

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();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ComponentWithOuterFunctionUseCallback
ComponentWithUseCallback
ComponentWithInlineFunction
ComponentWithArrowFunction
ComponentWithOuterFunctionUseCallbackV2
ComponentWithUseCallbackV2
ComponentWithInlineFunctionV2
ComponentWithArrowFunctionV2
ComponentWithOuterFunctionUseCallback--2
ComponentWithUseCallback--2
ComponentWithInlineFunction--2
ComponentWithArrowFunction--2
ComponentWithOuterFunctionUseCallbackV2--2
ComponentWithUseCallbackV2--2
ComponentWithInlineFunctionV2--2
ComponentWithArrowFunctionV2--2

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: one year ago)

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

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
ComponentWithOuterFunctionUseCallback	12201.7 Ops/sec
ComponentWithUseCallback	8823.5 Ops/sec
ComponentWithInlineFunction	7345.3 Ops/sec
ComponentWithArrowFunction	5745.6 Ops/sec
ComponentWithOuterFunctionUseCallbackV2	8376.9 Ops/sec
ComponentWithUseCallbackV2	7616.9 Ops/sec
ComponentWithInlineFunctionV2	10687.1 Ops/sec
ComponentWithArrowFunctionV2	12200.5 Ops/sec
ComponentWithOuterFunctionUseCallback--2	6404.7 Ops/sec
ComponentWithUseCallback--2	5474.5 Ops/sec
ComponentWithInlineFunction--2	5367.4 Ops/sec
ComponentWithArrowFunction--2	4991.9 Ops/sec
ComponentWithOuterFunctionUseCallbackV2--2	6248.6 Ops/sec
ComponentWithUseCallbackV2--2	6019.4 Ops/sec
ComponentWithInlineFunctionV2--2	6161.1 Ops/sec
ComponentWithArrowFunctionV2--2	6201.9 Ops/sec

useCallback efficiency vs normal function efficiency (version: 0)

useCallback efficiency vs normal function efficiency

Created: one year ago by: Registered User

Jump to the latest result

ComponentWithOuterFunctionUseCallback

ComponentWithUseCallback

ComponentWithInlineFunction

ComponentWithArrowFunction

ComponentWithOuterFunctionUseCallbackV2

ComponentWithUseCallbackV2

ComponentWithInlineFunctionV2

ComponentWithArrowFunctionV2

ComponentWithOuterFunctionUseCallback--2

ComponentWithUseCallback--2

ComponentWithInlineFunction--2

ComponentWithArrowFunction--2

ComponentWithOuterFunctionUseCallbackV2--2

ComponentWithUseCallbackV2--2

ComponentWithInlineFunctionV2--2

ComponentWithArrowFunctionV2--2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A