React Hooks vs. Inline 2
Date tested:
4 years ago
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36
Test name
Executions per second
Inline Updates
61528.3 Ops/sec
Hooks Updates
135283.3 Ops/sec
Inline Mount
50445.7 Ops/sec
Hooks Mount
96162.7 Ops/sec
Benchmark definition (click to collapse):
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="inline"></div> <div id="hooks"></div>
Script Preparation code:
function ComponentWithInlineFunction() { const [__, forceRerender] = React.useState(); React.useEffect(() => { window.forceRerenderInline = forceRerender; }, []); const clickMe = evt => evt.preventDefault(); return React.createElement('button', {onClick: clickMe}, 'Click me!'); } ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('inline')) function ComponentWithUseCallback() { const [__, forceRerender] = React.useState(); React.useEffect(() => { window.forceRerenderHooks = forceRerender; }, []); const clickMe = React.useCallback(evt => evt.preventDefault(), []); return React.createElement('button', {onClick: clickMe}, 'Click me!'); } ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('hooks'))
Tests:
Inline Updates
window.forceRerenderInline({})
Hooks Updates
window.forceRerenderHooks({})
Inline Mount
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('inline'))
Hooks Mount
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('hooks'))
Open this result on MeasureThat.net