React useMemo (v3)

Revision 3 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

Test runner

Ready to run.

Testing in
TestOps/sec
Without useMemo
const { useMemo, createElement } = React;

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

const App = () => {
  const value = new Array(1000).fill(1);
  return createElement(
    'div',
    null,
    createElement(Simple, { value: value })
  );
};
ReactDOM.render(createElement(App), document.getElementById('root'));
ready
With useMemo
const { useMemo, createElement } = React;

const WithMemo = ({ value }) => {
  const calculatedValue = useMemo(() => value, [value]);

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

const AppWithMemo = () => {
  const value = new Array(1000).fill(1);
  return createElement(
    'div',
    null,
    createElement(WithMemo, { value: value })
  );
};
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.