Benchmark: memoized hook vs raw hook

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

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Windows

View result in a separate tab

raw hook

207/s

memoized hook

198/s

View exact numbers

Test name	Executions per second
✓ raw hook	207 Ops/sec
memoized hook	198 Ops/sec

memoized hook vs raw hook (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 raw hook (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`