Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
memoized hook vs raw hook
(version: 1)
Comparing performance of:
memoized hook vs raw hook
Created:
6 months ago
by:
Guest
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
memoized hook
raw hook
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 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
Embed
Embed Benchmark Result
Test name
Executions per second
memoized hook
198.5 Ops/sec
raw hook
207.3 Ops/sec
Related benchmarks:
Cache global vs reference
Array loop
Qqqqqq
Qqqqqqq
Qqqqqqqq
Qqqqqqqqq
Scoping test without log
name23
??= vs manual 3
Comments
Confirm delete:
Do you really want to delete benchmark?