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: 3 years 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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Related benchmarks: