Benchmark: useMemo - MeasureThat.net

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 ComponentWithInlineFunction() {
    const clickMe = () => {};
    return React.createElement('button', {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithUseCallback() {
    const clickMe = React.useCallback(() => {}, []);
    return React.createElement('button', {
        onClick: clickMe
    }, 'Click me!');
}

function ComponentWithoutUseMemo() {
    const obj = {
        x: 1,
        y: 1
    };
    return React.createElement('h1', {
        data: obj
    }, 'ComponentWithoutUseMemo');
}

function ComponentWithUseMemo() {
    const obj = React.useMemo(() => ({
        x: 1,
        y: 1
    }), []);
    return React.createElement('h1', {
        data: obj
    }, 'ComponentWithUseMemo');
}

const ChildWithoutMemo = () => {
    return React.createElement('div', null, null);
}

const ChildWithMemo = React.memo(ChildWithoutMemo);

function ComponentWithoutMemorizedChild() {
    const [count, setCount] = React.useState(0);
    React.useEffect(() => {
        if (count < 10000) {
            setCount(c => c + 1);
        }
    })
    return React.createElement(ChildWithoutMemo, null, null);
}

function ComponentWithMemorizedChild() {
    const [count, setCount] = React.useState(0);
    React.useEffect(() => {
        if (count < 10000) {
            setCount(c => c + 1);
        }
    })
    return React.createElement(ChildWithMemo, null, null);
}

Tests:

Inline Function
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
Hooks
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
Without useMemo
ReactDOM.render(React.createElement(ComponentWithoutUseMemo), document.getElementById('root'))
With useMemo
ReactDOM.render(React.createElement(ComponentWithUseMemo), document.getElementById('root'))
Child without memo
ReactDOM.render(React.createElement(ComponentWithoutMemorizedChild), document.getElementById('root'))
Child with memo
ReactDOM.render(React.createElement(ComponentWithMemorizedChild), document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Inline Function
Hooks
Without useMemo
With useMemo
Child without memo
Child with memo

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/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Inline Function	781294.2 Ops/sec
Hooks	970756.2 Ops/sec
Without useMemo	677793.6 Ops/sec
With useMemo	945551.4 Ops/sec
Child without memo	538649.9 Ops/sec
Child with memo	570424.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance of different React components with and without memoization. Memoization is a technique used to optimize function calls by caching their results.

There are four test cases:

1. **Inline Function**: This test case renders a React component that uses an inline function as its click handler.
2. **Hooks**: This test case renders a React component that uses the `useCallback` hook to memoize a function.
3. **Without useMemo**: This test case renders a React component that does not use memoization.
4. **With useMemo**: This test case renders a React component that uses the `useMemo` hook to memoize a value.
5. **Child without memo**: This test case renders a child component of another component that does not use memoization.
6. **Child with memo**: This test case renders a child component of another component that uses memoization.

**Options Compared**

The benchmark compares the performance of these six test cases:

* Inline Function vs. Without useMemo
* Hooks (with useCallback) vs. Without useMemo
* With useMemo vs. Without useMemo
* Child without memo vs. Child with memo

**Pros and Cons of Each Approach**

1. **Inline Function**: This approach uses an inline function as its click handler, which can lead to slower performance since the function is recreated on every render.
	* Pros: None notable
	* Cons: Performance overhead due to function recreation
2. **Hooks (with useCallback)**: This approach uses the `useCallback` hook to memoize a function, which helps optimize performance by caching the function's results.
	* Pros: Performance optimization through function caching
	* Cons: May require additional setup and understanding of hooks
3. **Without useMemo**: This approach does not use memoization, which means that the component will recompute its values on every render, leading to slower performance.
	* Pros: None notable
	* Cons: Performance overhead due to recomputing values on every render
4. **With useMemo**: This approach uses the `useMemo` hook to memoize a value, which helps optimize performance by caching the value's results.
	* Pros: Performance optimization through value caching
	* Cons: May require additional setup and understanding of hooks
5. **Child without memo**: This approach renders a child component that does not use memoization, which can lead to slower performance since the child component will recompute its values on every render.
	* Pros: None notable
	* Cons: Performance overhead due to recomputing values on every render
6. **Child with memo**: This approach renders a child component that uses memoization, which helps optimize performance by caching the child component's results.
	* Pros: Performance optimization through value caching
	* Cons: May require additional setup and understanding of hooks

**Benchmark Results**

The benchmark results show that:

* Using `useMemo` or `useCallback` leads to significantly better performance than not using memoization.
* Using memoization on child components can also lead to improved performance.

Overall, the benchmark suggests that using memoization can help optimize React component performance, especially when rendering complex components with multiple re-renders.

Related benchmarks:

useMemo (version: 0)

Comparing performance of: Inline Function vs Hooks vs Without useMemo vs With useMemo vs Child without memo vs Child with memo

Created: one year ago by: Guest

Jump to the latest result

Inline Function

Hooks

Without useMemo

With useMemo

Child without memo

Child with memo

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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