Run results for: useMemo effect speed

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser: Chrome 129

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Memoized App	48280.1 Ops/sec
Default App	49496.9 Ops/sec

HTML Preparation code:

<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<div id="root"></div>

Script Preparation code:

const Factoid = ({ variant = "default", width = "auto", height = "auto" }) => {
  const widthStr = typeof width === "number" ? `${width}px` : width;
  const heightStr = typeof height === "number" ? `${height}px` : height;
  const variantAttr = variant === "default" ? "regular" : "bold";

  return React.createElement(
    "div",
    null,
    React.createElement("div", null, widthStr),
    React.createElement("div", null, heightStr),
    React.createElement("div", null, variantAttr)
  );
};

const FactoidMemo = ({
  variant = "default",
  width = "auto",
  height = "auto",
}) => {
  const widthStr = React.useMemo(
    () => (typeof width === "number" ? `${width}px` : width),
    [width]
  );
  const heightStr = React.useMemo(
    () => (typeof height === "number" ? `${height}px` : height),
    [height]
  );
  const variantAttr = React.useMemo(
    () => (variant === "default" ? "regular" : "bold"),
    [variant]
  );

  return React.createElement(
    "div",
    null,
    React.createElement("div", null, widthStr),
    React.createElement("div", null, heightStr),
    React.createElement("div", null, variantAttr)
  );
};

const Wrapper = ({ children }) => {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    if (count < 10000) {
      setCount((c) => c + 1);
    }
  }, [count]);

  return React.createElement("div", null, children);
};

function App () {
  return React.createElement(
    Wrapper,
    null,
    React.createElement(Factoid, null)
  );
};

function MemoizedApp() {
  return React.createElement(
    Wrapper,
    null,
    React.createElement(FactoidMemo, null)
  );
};

Tests:

Memoized App
ReactDOM.render(React.createElement(MemoizedApp), document.getElementById('root'))
Default App
ReactDOM.render(React.createElement(App), document.getElementById('root'))

Run results for: useMemo effect speed

Memoized App

Default App