Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
forwardRef perf vs simple
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=522043" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 YaBrowser/24.4.0.0 Safari/537.36
Browser:
Yandex Browser 24
Operating system:
Windows
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
Component With forwardRef
129764.6 Ops/sec
Normal component
139810.5 Ops/sec
Normal with list
136230.6 Ops/sec
forwardRef list
140807.2 Ops/sec
HTML Preparation code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <div id="root-edu"></div>
Script Preparation code:
var people = [{a:1}, {a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1},{a:1}] var root = document.getElementById('root-edu');
Tests:
Component With forwardRef
const ComponentWithForwardRef = React.forwardRef((props, ref) => ( React.createElement('div', { ref: ref }, 'Component using forwardRef' ) )); var benchmarkTest = () => { ReactDOM.render(React.createElement(ComponentWithForwardRef), root); }; benchmarkTest();
Normal component
const ComponentWithoutForwardRef = (props) => ( React.createElement('div', null, // Your component content 'Component without forwardRef' ) ); var benchmarkTest = () => { ReactDOM.render(React.createElement(ComponentWithoutForwardRef), root); }; benchmarkTest();
Normal with list
const ComponentWithForwardRef = React.forwardRef((props, ref) => ( React.createElement('div', { ref: ref }, 'Component using forwardRef' ) )); const App = () => ( React.createElement('div', null, people.map((person, index) => ( React.createElement(ComponentWithForwardRef, { key: index }) )) ) ); ReactDOM.render(React.createElement(ComponentWithForwardRef), root);
forwardRef list
const ComponentWithoutForwardRef = (props) => ( React.createElement('div', null, // Your component content 'Component without forwardRef' ) ); const App = () => ( React.createElement('div', null, people.map((person, index) => ( React.createElement(ComponentWithoutForwardRef, { key: index }) )) ) ); ReactDOM.render(React.createElement(ComponentWithoutForwardRef), root);