Test name | Executions per second |
---|---|
Inline Function | 505580.5 Ops/sec |
Hooks | 581778.1 Ops/sec |
Without useMemo | 450433.7 Ops/sec |
With useMemo | 579485.1 Ops/sec |
Child without memo | 398920.2 Ops/sec |
Child with memo | 420689.7 Ops/sec |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
function ComponentWithInlineFunction() {
const clickMe = () => {};
return React.createElement('button', {
onClick: clickMe
}, 'Click me!');
}
function ComponentWithUseCallback() {
const clickMe = React.useCallback(() => {}, []);
return React.createElement('button', {
onClick: clickMe
}, 'Click me!');
}
function ComponentWithoutUseMemo() {
const obj = {
x: 1,
y: 1
};
return React.createElement('h1', {
data: obj
}, 'ComponentWithoutUseMemo');
}
function ComponentWithUseMemo() {
const obj = React.useMemo(() => ({
x: 1,
y: 1
}), []);
return React.createElement('h1', {
data: obj
}, 'ComponentWithUseMemo');
}
const ChildWithoutMemo = () => {
return React.createElement('div', null, null);
}
const ChildWithMemo = React.memo(ChildWithoutMemo);
function ComponentWithoutMemorizedChild() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
if (count < 10000) {
setCount(c => c + 1);
}
})
return React.createElement(ChildWithoutMemo, null, null);
}
function ComponentWithMemorizedChild() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
if (count < 10000) {
setCount(c => c + 1);
}
})
return React.createElement(ChildWithMemo, null, null);
}
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithoutUseMemo), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithUseMemo), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithoutMemorizedChild), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithMemorizedChild), document.getElementById('root'))