Run results for: string.split vs useMemo string.split

Run details:

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

Browser: Chrome 115

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Split useMemo	1757893.1 Ops/sec
Split every render	1859741.2 Ops/sec
Baseline	1943355.8 Ops/sec

HTML Preparation code:


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Script Preparation code:

var root = ReactDOM.createRoot(document.getElementById('root'));

const myString = 'someValueOrSomething:someOtherThing:EvenMoreStuff'

function ComponentBaseline() {
    return React.createElement('div', {}, 'someOtherThing');
}

function ComponentWithSplitUseMemo() {
    const [first, middle, last] = React.useMemo(() => myString.split(':'), [myString]);
    return React.createElement('div', {}, middle);
}

function ComponentWithSplit() {
    const [first, middle, last] = myString.split(':')
    return React.createElement('div', {}, middle);
}

Tests:

Split useMemo
root.render(React.createElement(ComponentWithSplitUseMemo));
Split every render
root.render(React.createElement(ComponentWithSplit));
Baseline
root.render(React.createElement(ComponentBaseline));

Run results for: string.split vs useMemo string.split

Split useMemo

Split every render

Baseline