Benchmark: useMemo and memoa console

HTML Preparation code:

<div id="root"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

Script Preparation code:

function ChildComponent(props) {
    return React.createElement("div", props);
}

const a = {
    a: "hello",
    b: "world"
}


function UseMemoAlone(props) {
    const handler = React.useMemo(() => {
        console.log("aaaa")
        return {
            ...a,
            c: "!!"
        }
    }, []);
    return React.createElement(ChildComponent, {
        className: handler.toString()
    });
}

function NoMemo(props) {
    console.log("bbbbb")
    const handler = {
        ...a,
        c: "!!"
    };
    return React.createElement(ChildComponent, {
        className: handler.toString()
    });
}

var propCases = [{
    handler: function() {
        return Math.random();
    },
    wait: 100
}, {
    handler: function() {
        return Math.random();
    },
    wait: 200
}];
propCases.push(propCases[1]);

Tests:

No Memo
propCases.forEach((props) => { ReactDOM.render(React.createElement(NoMemo, props, null), root); });
UseMemoAlone
propCases.forEach((props) => { ReactDOM.render(React.createElement(UseMemoAlone, props, null), root); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
No Memo
UseMemoAlone

useMemo and memoa console (version: 0)

Comparing performance of: No Memo vs UseMemoAlone

Created: one year ago by: Guest

Jump to the latest result

No Memo

UseMemoAlone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results