Run results for: memoized hook vs not

Run details:

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: Chrome 141

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 6 months ago

Test name	Executions per second
memoized hook	510574.9 Ops/sec
raw hook	366112.4 Ops/sec

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

Run results for: memoized hook vs not

memoized hook

raw hook