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

HTML Preparation code:

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/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/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Inline Function	591621.6 Ops/sec
Hooks	669048.1 Ops/sec
Without useMemo	516036.4 Ops/sec
With useMemo	630078.1 Ops/sec
Child without memo	451535.5 Ops/sec
Child with memo	493341.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches in React Hooks can be an interesting benchmarking exercise.

**What is being tested?**

The benchmark compares the performance of three approaches:

1. **Inline Function**: This approach uses a regular function to handle the click event, without using any optimization techniques like `useCallback` or `useMemo`.
2. **Hooks**: This approach uses React Hooks (specifically `useCallback`) to memoize the click handler function.
3. **With useMemo**: This approach uses `React.useMemo` to optimize the rendering of a component that contains an object.

**Options compared**

The benchmark compares the performance of these three approaches, which can be summarized as follows:

*   **Function call overhead**: Inline Function and Without useMemo approach may have higher overhead due to function call.
*   **Optimization techniques**: Hooks and With useMemo approach use optimization techniques like `useCallback` and `useMemo` to reduce unnecessary re-renders.

**Pros and Cons**

Here are some pros and cons of each approach:

*   **Inline Function**:
    *   Pros: Simple and easy to understand.
    *   Cons: May have higher overhead due to function call, leading to slower performance.
*   **Hooks**:
    *   Pros: Reduces unnecessary re-renders by memoizing the click handler function.
    *   Cons: Requires understanding of React Hooks and their usage.
*   **With useMemo**:
    *   Pros: Optimizes rendering by memoizing the object, reducing unnecessary re-renders.
    *   Cons: May require more complex code to understand and set up.

**Library and its purpose**

The `React` library is used in this benchmark. It's a JavaScript library for building user interfaces and is widely used in web development.

**Special JS feature or syntax**

This benchmark uses some special JavaScript features:

*   **Arrow functions**: Used in the Inline Function approach.
*   **React Hooks**: Used in the Hooks approach.
*   **`useMemo`**: Used in the With useMemo approach.

Overall, this benchmark is designed to help developers understand the trade-offs between different approaches when it comes to performance optimization in React applications.

Related benchmarks:

React Hooks vs. Inline, useMemo, memo React v18 (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):