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>

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

​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/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Inline Function	505580.5 Ops/sec
Hooks	581778.1 Ops/sec
Without useMemo	450433.7 Ops/sec
With useMemo	579485.1 Ops/sec
Child without memo	398920.2 Ops/sec
Child with memo	420689.7 Ops/sec

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

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:

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

Options Compared

The benchmark compares three options:

Inline Function: Using an inline function as the click handler in the React component.
Hooks (useCallback): Using the useCallback hook to memoize the click handler in the React component.
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:

Hooks: 581,778.0625
With useMemo: 579,485.0625
Inline Function: 505,580.5
Without useMemo: 450,433.6875
Child with memo: 420,689.65625
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.

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: one year 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 4 months ago):