Benchmark: string.split vs useMemo string.split

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Split useMemo
Split every render
Baseline

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: 9 months ago)

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/OS: Chrome 115 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Split useMemo	1757893.0 Ops/sec
Split every render	1859741.0 Ops/sec
Baseline	1943356.0 Ops/sec

string.split vs useMemo string.split (version: 0)

Comparing performance of: Split useMemo vs Split every render vs Baseline

Created: 9 months ago by: Registered User

Jump to the latest result

Split useMemo

Split every render

Baseline

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A