Benchmark: useMemo slice - MeasureThat.net

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 mockItems = Array(6)
	.fill("")
	.map((_value, index) => ({
		id: index + 1,
		src: "",
	}));


const Demo = ({isMobile = true}={}) => {
  const [items, setItems] = React.useState(mockItems);

  const itemsToShow = items.slice(0, isMobile ? 6 : 5);

  return React.createElement(
    "div",
    null,
    React.createElement("div", null, itemsToShow.map(i=>i.id)),
  );
};

const MemoizedDemo = ({isMobile = true}={}) => {
  const [items, setItems] = React.useState(mockItems);

  const itemsToShow = React.useMemo(()=>items.slice(0, isMobile ? 6 : 5),[items, isMobile]);

  return React.createElement(
    "div",
    null,
    React.createElement("div", null, itemsToShow.map(i=>i.id)),
  );
};

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(Demo, null)
  );
};

function MemoizedApp() {
  return React.createElement(
    Wrapper,
    null,
    React.createElement(MemoizedDemo, 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

Autogenerated LLM Sumamry (model llama3.2:3b, generated 2 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark that tests the performance of two React applications: `App` and `MemoizedApp`. The benchmark aims to measure the difference in execution speed between these two versions.

**Test Case 1: Memoized App**

* **Description**: This test case renders the `MemoizedApp` component, which wraps the `Wrapper` component with a stateful `React.useEffect` hook that increments a counter up to 10,000 iterations.
* **Purpose**: The purpose of this test is to measure the performance impact of memoization on React applications.

**Test Case 2: Default App**

* **Description**: This test case renders the `App` component, which also uses a stateful `React.useEffect` hook with a similar counter incrementation logic.
* **Purpose**: The purpose of this test is to serve as a baseline for comparing the performance of memoized and non-memoized React applications.

**Options Compared**

The benchmark compares two approaches:

1. **Non-Memoized App (Default App)**: This version uses traditional state management and updates the component's state on every render.
2. **Memoized App**: This version uses React's `useMemo` hook to memoize the `itemsToShow` calculation, which reduces the number of unnecessary re-renders.

**Pros and Cons**

* **Non-Memoized App (Default App)**:
	+ Pros: Easier to understand and maintain, as there are no additional hooks or state management complexities.
	+ Cons: May lead to performance issues if the component is frequently updated or if the calculation is computationally expensive.
* **Memoized App**:
	+ Pros: Reduces unnecessary re-renders, improving performance and responsiveness.
	+ Cons: Requires a good understanding of React's hooks and memoization, which can add complexity.

**Libraries Used**

The benchmark uses React (version 18.3.1) as the core library for rendering components. Additionally, it relies on ReactDOM (version 18.3.1) for DOM rendering.

**Special JS Features or Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax beyond React's hooks and JSX syntax.

**Other Alternatives**

If you're interested in exploring alternative approaches to memoization or optimizing React performance, here are some options:

* **React Query**: A library that provides an easy-to-use API for managing data fetching, caching, and memoization.
* **React Suspense**: A feature that allows for lazy loading and memoization of components.
* **Custom hooks**: Using custom hooks to optimize performance and manage state in React applications.

Keep in mind that the specific use case and requirements will dictate the best approach.

Latest run results:

Run details: (Test run date: 6 days 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	56591.6 Ops/sec
Default App	57108.2 Ops/sec

Related benchmarks:

useMemo slice (version: 0)

Comparing performance of: Memoized App vs Default App

Created: 6 days ago by: Guest

Jump to the latest result

Memoized App

Default App

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 2 days ago):