React useMemo (v2)

Revision 2 of this benchmark created on

Preparation HTML

<!-- Load React and ReactDOM from CDN -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- Create a root div for React -->
<div id="root"></div>

Setup

const { useState, useMemo, createElement } = React;

const SimpleCalculationComponent = ({ input }) => {
  return createElement('div', null, `Value: ${input}`);
};

const SimpleCalculationWithMemoComponent = ({ input }) => {
  const calculatedValue = useMemo(() => input, [input]);

  return createElement('div', null, `Value: ${calculatedValue}`);
};

const App = ({ withMemo }) => {
  const [input, setInput] = useState(1);

  return createElement(
    'div',
    null,
    withMemo
      ? createElement(SimpleCalculationWithMemoComponent, { input })
      : createElement(SimpleCalculationComponent, { input }),
    createElement('button', { onClick: () => setInput(input + 1) }, 'Re-render')
  );
};

Test runner

Ready to run.

Testing in
TestOps/sec
Without useMemo
const AppWithoutMemo = () => {
  const [input, setInput] = useState(1);

  return createElement(
    'div',
    null,
    createElement(SimpleCalculationComponent, { input }),
    createElement('button', { onClick: () => setInput(input + 1) }, 'Re-render')
  );
};

ReactDOM.render(createElement(AppWithoutMemo), document.getElementById('root'));
ready
With useMemo
const AppWithMemo = () => {
  const [input, setInput] = useState(1);

  return createElement(
    'div',
    null,
    createElement(SimpleCalculationWithMemoComponent, { input }),
    createElement('button', { onClick: () => setInput(input + 1) }, 'Re-render')
  );
};

ReactDOM.render(createElement(AppWithMemo), document.getElementById('root'));
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.