Benchmark: memoized hook vs not

HTML Preparation code:

<!--your preparation HTML code goes here-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="dest"></div>

Script Preparation code:

var getRandomBoolean = () => {
   return Math.random() < 0.5;
}

Tests:

memoized hook
/*When writing async/deferred tests, use `deferred.resolve()` to mark test as done*/ const useWithLimit = () => { const isClose = getRandomBoolean(); const isLimit = getRandomBoolean(); const isEnabled = getRandomBoolean(); const shouldShow = React.useMemo(() => { return !isClose || (!isLimit && isEnabled) }, [isClose, isLimit, isEnabled]); return {showBanner: shouldShow}; } const Hello = ({toWhat}) => { const {showBanner} = useWithLimit(); return React.createElement('div', null, `Hello ${toWhat}`); } ReactDOM.render( React.createElement(Hello, {toWhat: 'World'}, null), document.getElementById('dest') );
raw hook
const useWithLimit = () => { const isClose = getRandomBoolean(); const isLimit = getRandomBoolean(); const isEnabled = getRandomBoolean(); return {showBanner: !isClose || (!isLimit && isEnabled)}; } const Hello = ({toWhat}) => { const {showBanner} = useWithLimit(); return React.createElement('div', null, `Hello ${toWhat}`); } ReactDOM.render( React.createElement(Hello, {toWhat: 'World'}, null), document.getElementById('dest') );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
memoized hook
raw hook

Fastest: N/A

Slowest: N/A

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/141.0.0.0 Safari/537.36

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

raw hook

340K/s

memoized hook

232K/s

View exact numbers

Test name	Executions per second
✓ raw hook	339,846 Ops/sec
memoized hook	232,464 Ops/sec

memoized hook vs not (version: 1)

Comparing performance of: `memoized hook vs raw hook`

Created: 9 months ago by: Guest

Go to the latest result

memoized hook

raw hook

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

memoized hook vs not (version: 1)

Comparing performance of: memoized hook vs raw hook

Created: 9 months ago by: Guest

Go to the latest result

memoized hook

raw hook

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `memoized hook vs raw hook`