Benchmark: React Hooks vs. Inline, useMemo, memo React 18.2.0

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Definition JSON**

The benchmark definition is a JSON object that contains information about the test cases. In this case, there are six test cases:

1. `Inline Function`: Tests rendering a React component with an inline function as the click handler.
2. `Hooks`: Tests rendering a React component using the `useCallback` hook to memoize the click handler.
3. `Without useMemo`: Tests rendering a React component without using the `useMemo` hook.
4. `With useMemo`: Tests rendering a React component using the `useMemo` hook to memoize a computed value.
5. `Child without memo`: Tests rendering a child component without memoization.
6. `Child with memo`: Tests rendering a child component with memoization.

**Options Compared**

The benchmark compares three options:

1. **Inline Function**: Using an inline function as the click handler in the React component.
2. **Hooks (useCallback)**: Using the `useCallback` hook to memoize the click handler in the React component.
3. **Without useMemo** (and by extension, without memoization for child components): Not using the `useMemo` hook or any form of memoization in the React component.

**Pros and Cons**

* **Inline Function**: Pros: simple, straightforward approach; cons: can lead to performance issues if not optimized correctly.
* **Hooks (useCallback)**: Pros: more efficient and effective way to memoize functions; cons: may require additional setup and understanding of hooks.
* **Without useMemo**: Pros: simplest approach, but also the least performant; cons: can lead to unnecessary re-renders and performance issues.

**Library and Purpose**

The benchmark uses React 18.2.0 as the library, which includes several new features such as improved memoization options (e.g., `useCallback`, `useMemo`).

**Special JS Features**

This benchmark doesn't use any special JavaScript features like async/await or Promises, but it does use modern ES6+ syntax.

**Device and OS**

The benchmark runs on a desktop machine with macOS 10.15.7.

**Results**

The results show the number of executions per second for each test case:

1. `Hooks`: 581,778.0625
2. `With useMemo`: 579,485.0625
3. `Inline Function`: 505,580.5
4. `Without useMemo`: 450,433.6875
5. `Child with memo`: 420,689.65625
6. `Child without memo`: 398,920.15625

These results indicate that using the `useCallback` hook and/or `useMemo` can lead to significant performance improvements compared to not using them at all.

Related benchmarks:

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

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

Created: 2 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>

Fastest: N/A

Slowest: N/A

No previous run results

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