Benchmark: useMemo effect speed

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'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Memoized App
Default App

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark test case and explain what is being tested.

**Benchmark Definition**

The benchmark definition consists of two tests:

1. `ReactDOM.render(React.createElement(MemoizedApp), document.getElementById('root'))`: This test renders the `MemoizedApp` component to a DOM element with the id `root`.
2. `ReactDOM.render(React.createElement(App), document.getElementById('root'))`: This test renders the `App` component to a DOM element with the id `root`.

**What is being tested?**

These two tests measure the performance difference between using `React.useMemo` ( Memoized App ) and not using it ( Default App ). Specifically, they are testing the execution speed of rendering the components.

**Options compared**

The two tests compare the following options:

1. **Using `React.useMemo`**: This approach memoizes certain values within the component, which can improve performance by avoiding unnecessary re-renders.
2. **Not using `React.useMemo` (Default App)**: In this case, all values are recalculated on every render, which can lead to slower performance.

**Pros and cons**

Using `React.useMemo` has several pros:

* Improved performance by reducing unnecessary re-renders
* Better memory usage, as memoized values are only calculated once

However, there are some potential cons:

* Increased complexity, as the developer needs to manage memoization manually
* Potential issues with stale data if not used correctly

Not using `React.useMemo` (Default App) has several cons:

* Slower performance due to unnecessary re-renders
* Poorer memory usage, leading to increased garbage collection and potential performance issues

**Library**

The benchmark uses React and React DOM libraries. Specifically, it relies on the following libraries:

* React: `React.createElement`, `React.useMemo`
* React DOM: `ReactDOM.render`

**Special JS feature or syntax**

This benchmark does not use any special JavaScript features or syntax that are specific to modern browsers.

**Other considerations**

When developing this benchmark, consider the following:

* Use a consistent setup for both tests to ensure accurate comparisons
* Ensure that the test environment is stable and consistent across different executions
* Consider using a larger dataset or more complex components to increase the impact of the performance difference

As for alternatives, there are several other ways to optimize component performance in React:

1. **Use `React.memo`**: This can help optimize re-renders by memoizing entire components.
2. **Avoid unnecessary state updates**: Use `useState` and `useEffect` judiciously to minimize state updates and re-renders.
3. **Optimize DOM manipulation**: Use techniques like ` React.createPortal` or `React.Fragment` to reduce the number of DOM mutations.

These alternatives can be used in conjunction with `React.useMemo` to further optimize performance, but they may also introduce additional complexity and trade-offs.

Related benchmarks:

useMemo effect speed (version: 0)

Comparing performance of: Memoized App vs Default App

Created: one year ago by: Guest

Jump to the latest result

Memoized App

Default App

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):