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>

AخA
 
<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);
}

​x
 
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'))
ReactDOM.render(React.createElement(ComponentWithInlineFunction), document.getElementById('root'))
Hooks
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithUseCallback), document.getElementById('root'))
Without useMemo
ReactDOM.render(React.createElement(ComponentWithoutUseMemo), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithoutUseMemo), document.getElementById('root'))
With useMemo
ReactDOM.render(React.createElement(ComponentWithUseMemo), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithUseMemo), document.getElementById('root'))
Child without memo
ReactDOM.render(React.createElement(ComponentWithoutMemorizedChild), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithoutMemorizedChild), document.getElementById('root'))
Child with memo
ReactDOM.render(React.createElement(ComponentWithMemorizedChild), document.getElementById('root'))
ReactDOM.render(React.createElement(ComponentWithMemorizedChild), document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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 5 months ago):

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:

Inline Function: This approach uses a regular function to handle the click event, without using any optimization techniques like useCallback or useMemo.
Hooks: This approach uses React Hooks (specifically useCallback) to memoize the click handler function.
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.

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 5 months ago):