Benchmark: React Hooks vs. Inline, useMemo, memo

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 month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Inline Function	854511.6 Ops/sec
Hooks	1053672.2 Ops/sec
Without useMemo	621185.2 Ops/sec
With useMemo	965599.1 Ops/sec
Child without memo	410064.6 Ops/sec
Child with memo	409753.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares four React components: `ComponentWithInlineFunction`, `ComponentWithUseCallback`, `ComponentWithoutUseMemo`, and `ComponentWithUseMemo`. The main differences between these components lie in how they handle memoization (i.e., caching frequently used values) and reusing functions.

**Test Cases**

Each test case renders one of the React components using `ReactDOM.render` and measures the execution time. The six test cases are:

1. **Inline Function**: `ComponentWithInlineFunction`
2. **Hooks**: `ComponentWithUseCallback`
3. **Without useMemo**: `ComponentWithoutUseMemo`
4. **With useMemo**: `ComponentWithUseMemo`
5. **Child without memo**: `ComponentWithoutMemorizedChild` (a child component of one of the above)
6. **Child with memo**: `ComponentWithMemorizedChild` (a child component of one of the above)

**Comparison**

The test is comparing four approaches to memoization:

1. **Inline Function**: Define a function within the component and use it as an event handler.
2. **Hooks**: Use the `useCallback` hook to memoize functions.
3. **Without useMemo**: Don't use any memoization technique (i.e., every time the component re-renders, the function is recalculated).
4. **With useMemo**: Use the `useMemo` hook to cache frequently used values.

**Pros and Cons**

* **Inline Function**:
	+ Pros: Simple to implement, no additional dependencies required.
	+ Cons: Can lead to tight coupling between components and functions.
* **Hooks**:
	+ Pros: Encourages a functional programming style, easy to manage side effects.
	+ Cons: Can be slower than inline functions due to the overhead of hook invocations.
* **Without useMemo**:
	+ Pros: No additional dependencies required, simple to implement.
	+ Cons: Can lead to slow performance and increased re-renders.
* **With useMemo**:
	+ Pros: Provides an efficient way to cache frequently used values, reduces re-renders.
	+ Cons: Requires additional dependencies (React hooks), can be less intuitive for complex use cases.

The benchmark results show that the `ComponentWithUseMemo` approach tends to outperform the others in terms of execution time. This suggests that memoization using React hooks is a effective way to optimize performance, especially when dealing with complex components and frequent re-renders.

Related benchmarks:

React Hooks vs. Inline, useMemo, memo (version: 10)

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

Created: 3 years ago by: Registered User

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