Benchmark: React: useMemo vs inline computation

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Script Preparation code:

function WithUseMemo() {
    const [iata, setIata] = React.useState('test')
    const isValid = React.useMemo(() => {
        return iata.length === 3
    }, [iata])
    const clickMe = () => {};
    return React.createElement('button', {
        disabled: !isValid
    }, 'Click me!');
}

function WithoutUseMemo() {
    const [iata, setIata] = React.useState('test')
    const isValid = iata.length === 3
    const clickMe = () => {};
    return React.createElement('button', {
        disabled: !isValid
    }, 'Click me!');
}

Tests:

With UseMemo
ReactDOM.render(React.createElement(WithUseMemo), document.getElementById('root'))
Without UseMemo
ReactDOM.render(React.createElement(WithoutUseMemo), document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With UseMemo
Without UseMemo

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; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Mac OS X 10.15

View result in a separate tab

Without UseMemo

1.0M/s

With UseMemo

989K/s

View exact numbers

Test name	Executions per second
✓ Without UseMemo	1,035,000 Ops/sec
With UseMemo	988,871 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is being tested?**

The test cases are comparing two approaches to computing the validity of an IATA (International Air Transport Association) code in a React application.

In both cases, we have:

* A state variable `iata` with an initial value of `'test'`.
* A computed property `isValid` that depends on the length of `iata`. If the length is 3, `isValid` is true; otherwise, it's false.
* A button element whose disabled attribute depends on the value of `isValid`.

The difference between the two approaches lies in how the `isValid` computation is performed:

**WithUseMemo**

1. We use the `React.useMemo` hook to compute `isValid`.
2. The memoized function returns a boolean value based on the length of `iata`.
3. The memoization ensures that the computation is only performed once, when the component mounts.

**WithoutUseMemo**

1. We simply compare the length of `iata` directly with 3.
2. This comparison is not memoized and will be re-evaluated every time the component updates.

**Options compared**

The two approaches can be summarized as follows:

* **WithUseMemo**: Memoization of the computation using `React.useMemo`. This approach avoids redundant computations by caching the result.
* **WithoutUseMemo**: No memoization, relying on a simple comparison.

**Pros and Cons**

**WithUseMemo**:

Pros:

* Avoids redundant computations, reducing unnecessary work.
* Caches the result for future uses, improving performance.

Cons:

* Adds an extra step to set up the memoization (using `React.useMemo`).
* May introduce additional overhead due to the extra function call and variable lookup.

**WithoutUseMemo**:

Pros:

* Simple and easy to understand.
* No additional overhead from memoization.

Cons:

* Can lead to redundant computations if the component updates frequently.

Overall, **WithUseMemo** is generally a better approach for performance-critical code, as it avoids unnecessary work and caches results. However, in cases where the computation is simple and infrequent, **WithoutUseMemo** might be sufficient.

**Library**

In this benchmark, we're using React, specifically its `useState` hook for state management, `useMemo` hook for memoization, and `ReactDOM.render` for rendering the component to the DOM.

React: useMemo vs inline computation (version: 0) Benchmark.js

Comparing performance of: `With UseMemo vs Without UseMemo`

Created: 3 years ago by: Registered User

Go to the latest result

With UseMemo

Without UseMemo

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

React: useMemo vs inline computation (version: 0) Benchmark.js

Comparing performance of: With UseMemo vs Without UseMemo

Created: 3 years ago by: Registered User

Go to the latest result

With UseMemo

Without UseMemo

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `With UseMemo vs Without UseMemo`