Run results for: Test UseRef

Run details:

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

Browser: Chrome 126

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

useRef

14K/s

useMemo

14K/s

No useMemo

13K/s

View exact numbers

Test name	Executions per second
✓ useRef	14,333 Ops/sec
useMemo	13,961 Ops/sec
No useMemo	12,505 Ops/sec

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(() => {
        return {
            ...a,
            c: "!!"
        }
    }, []);
    return React.createElement(ChildComponent, {
        className: handler.toString()
    });
}

function NoMemo(props) {
    const handler = {
        ...a,
        c: "!!"
    };
    return React.createElement(ChildComponent, {
        className: handler.toString()
    });
}

function UseRefAlone(props) {
    const handler = React.useRef({
        ...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
}, {
    handler: function() {
        return Math.random();
    },
    wait: 300
}];
propCases.push(propCases[1]);

Tests:

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