Run results for: memoized hook vs raw hook

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	469.5 Ops/sec
raw hook	462.3 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 makeSequence = function(n, changeProb, seed) {
  if (seed === undefined) seed = 42 >>> 0;
  var s = seed >>> 0;
  var rand = function() {
    s = (1664525 * s + 1013904223) >>> 0;
    return s / 4294967296;
  };
  var seq = [];
  var last = [rand() < 0.5, rand() < 0.5, rand() < 0.5];
  for (var i = 0; i < n; i++) {
    last = last.map(function(v){ return (rand() < changeProb) ? !v : v; });
    seq.push([last[0], last[1], last[2]]);
  }
  return seq;
};

// Parameters you can tweak:
var N_RENDERS   = 5000;   // how many renders per test run
var CHANGE_PROB = 0.10;   // probability each dep flips per render (0..1)

// One shared, immutable sequence for both test cases:
var SEQ = makeSequence(N_RENDERS, CHANGE_PROB, 123);

// Component under test: with useMemo
var WithMemo = function(props) {
  var t = props.triplet; // [isClose, isLimit, isEnabled]
  var shouldShow = React.useMemo(function() {
    return !t[0] || (!t[1] && t[2]);
  }, t); // note: passing array is fine here because we rebuild it from SEQ
  return null;
};

// Component under test: without useMemo
var WithoutMemo = function(props) {
  var t = props.triplet;
  var shouldShow = !t[0] || (!t[1] && t[2]);
  return null;
};

// Minimal runner: mounts once, then synchronously re-renders N times
// with the precomputed triplets. Uses legacy ReactDOM.render for sync commits.
var run = function(Component, seq) {
  var container = document.createElement('div');
  document.body.appendChild(container);

  // initial mount
  ReactDOM.render(React.createElement(Component, { triplet: seq[0] }), container);

  // drive N-1 updates; ReactDOM.render is synchronous in legacy mode
  for (var i = 1; i < seq.length; i++) {
    ReactDOM.render(React.createElement(Component, { triplet: seq[i] }), container);
  }

  // cleanup
  ReactDOM.unmountComponentAtNode(container);
  document.body.removeChild(container);
};

Tests:

memoized hook
run(WithMemo, SEQ);
raw hook
run(WithoutMemo, SEQ);