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

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 = () => {
        const heavyMap = new Map()

        for (let i = 0; i < 10000000; i++) {
            heavyMap.set(i, i + 1)
        }

        return heavyMap
    }
    return React.createElement('button', {
        onClick: clickMe
    }, 'Click me!')
}

function ComponentWithUseCallback() {
    const clickMe = React.useCallback(() => {
        const heavyMap = new Map()

        for (let i = 0; i < 10000000; i++) {
            heavyMap.set(i, i + 1)
        }

        return heavyMap
    }, [])
    return React.createElement('button', {
        onClick: clickMe
    }, 'Click me!')
}

function ComponentWithoutUseMemo() {
    const obj = {
        "items": [
            {
                "id": "2813d623-888c-4462-8566-98d098b2ca84",
                "number": "0000365",
                "contractNum": "M15J2",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 26.04.2021 по 25.04.2024",
                "dateCreated": "25.04.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "no-reply@accounts.google.com",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"system\":\"RU.RICH.RICH\",\"traceparent\":\"00-adc8a34c7a7be7487026e6412e4fe638-dba8ea8106b40265-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "1f3873c9-060d-4673-b93a-608f4127be2d",
                "number": "0000352",
                "contractNum": "M15J2",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 22.02.2024 по 22.04.2024",
                "dateCreated": "22.04.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "Golubeva.o@gmail.com",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"system\":\"RU.RICH.RICH\",\"traceparent\":\"00-049526ba0a9d99d02b353483ab87714e-1d28216a53a6726c-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "c1e8c852-d42b-401f-bd86-d66746056a18",
                "number": "0000327",
                "contractNum": "M15J2",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 23.04.2021 по 22.04.2024",
                "dateCreated": "22.04.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "ivkaza10@gmail.com",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"system\":\"RU.RICH.RICH\",\"traceparent\":\"00-d70ca410a0a28c0b76607f6b857db328-743c4bde48a0dae6-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "3f954d67-3269-4017-bc88-65a38ef98cdb",
                "number": "0000260",
                "contractNum": "OT264",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 01.03.2024 по 03.03.2024",
                "dateCreated": "28.03.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "RomanSerPetrov@beeline.ru",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"traceparent\":\"00-a76363da0ca154a4d39c02a9d11dbb95-ca401c366390924e-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "736e13a5-ca89-4ccb-8659-b359ef9ee6fe",
                "number": "0000259",
                "contractNum": "OT264",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "28.03.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "RomanSerPetrov@beeline.ru",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"traceparent\":\"00-1eaf8d410a983135d34a4640bf8dc544-eda9cef7e4e3684d-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "84b960e5-fca9-4671-9858-92b03d7e7c38",
                "number": "0000258",
                "contractNum": "OT264",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "28.03.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "RomanSerPetrov@beeline.ru",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"traceparent\":\"00-2995a7d409844b5cd842abc9afc27a1f-6467490abcb032e4-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "06a0c3bc-3dfe-466f-a03a-03130f282236",
                "number": "0000202",
                "contractNum": "OT264",
                "status": "DONE",
                "statusDesc": "Готов",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "25.03.2024",
                "fileStatus": "DELETED",
                "notificationEmail": null,
                "errorMessage": null,
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "539230ec-0a58-4ea0-bb29-f0ca091f6cf3",
                "number": "0000201",
                "contractNum": "OT264",
                "status": "DONE",
                "statusDesc": "Готов",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "25.03.2024",
                "fileStatus": "DELETED",
                "notificationEmail": null,
                "errorMessage": null,
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "f873f0ce-37be-4852-a425-6c6b41e7e26a",
                "number": "0000200",
                "contractNum": "OT264",
                "status": "DONE",
                "statusDesc": "Готов",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "25.03.2024",
                "fileStatus": "DELETED",
                "notificationEmail": null,
                "errorMessage": null,
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "153fc752-4c1b-4cb4-89ec-31031092e722",
                "number": "0000199",
                "contractNum": "OT264",
                "status": "DONE",
                "statusDesc": "Готов",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "25.03.2024",
                "fileStatus": "DELETED",
                "notificationEmail": null,
                "errorMessage": null,
                "fileType": "XLS",
                "isFacsimile": false
            }
        ],
        "page": 1,
        "itemsPerPage": 10,
        "totalItems": 35,
        "search": [],
        "filterMap": {},
        "filterDate": {
            "dateFrom": null,
            "dateTo": null
        },
        "sortMap": {},
        "hiddenColumns": []
    }
    return React.createElement('h1', {
        data: obj
    }, 'ComponentWithoutUseMemo')
}

function ComponentWithUseMemo() {
    const obj = React.useMemo(() => ({
        "items": [
            {
                "id": "2813d623-888c-4462-8566-98d098b2ca84",
                "number": "0000365",
                "contractNum": "M15J2",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 26.04.2021 по 25.04.2024",
                "dateCreated": "25.04.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "no-reply@accounts.google.com",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"system\":\"RU.RICH.RICH\",\"traceparent\":\"00-adc8a34c7a7be7487026e6412e4fe638-dba8ea8106b40265-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "1f3873c9-060d-4673-b93a-608f4127be2d",
                "number": "0000352",
                "contractNum": "M15J2",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 22.02.2024 по 22.04.2024",
                "dateCreated": "22.04.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "Golubeva.o@gmail.com",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"system\":\"RU.RICH.RICH\",\"traceparent\":\"00-049526ba0a9d99d02b353483ab87714e-1d28216a53a6726c-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "c1e8c852-d42b-401f-bd86-d66746056a18",
                "number": "0000327",
                "contractNum": "M15J2",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 23.04.2021 по 22.04.2024",
                "dateCreated": "22.04.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "ivkaza10@gmail.com",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"system\":\"RU.RICH.RICH\",\"traceparent\":\"00-d70ca410a0a28c0b76607f6b857db328-743c4bde48a0dae6-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "3f954d67-3269-4017-bc88-65a38ef98cdb",
                "number": "0000260",
                "contractNum": "OT264",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 01.03.2024 по 03.03.2024",
                "dateCreated": "28.03.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "RomanSerPetrov@beeline.ru",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"traceparent\":\"00-a76363da0ca154a4d39c02a9d11dbb95-ca401c366390924e-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "736e13a5-ca89-4ccb-8659-b359ef9ee6fe",
                "number": "0000259",
                "contractNum": "OT264",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "28.03.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "RomanSerPetrov@beeline.ru",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"traceparent\":\"00-1eaf8d410a983135d34a4640bf8dc544-eda9cef7e4e3684d-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "84b960e5-fca9-4671-9858-92b03d7e7c38",
                "number": "0000258",
                "contractNum": "OT264",
                "status": "ERROR",
                "statusDesc": "Ошибка",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "28.03.2024",
                "fileStatus": "ERROR",
                "notificationEmail": "RomanSerPetrov@beeline.ru",
                "errorMessage": "[404 Not Found] during [POST] to [http://proxy-mapic-test-lkb2b.apps.yd-kt09.vimpelcom.ru/rich-arfix-recon-act/v2/arfix/order-reconciliation-act] [RichFeign#orderReconciliationAct(OrderReconciliationActReq)]: [{\"meta\":{\"status\":\"ERROR\",\"code\":2006,\"message\":\"Договор не найден\",\"traceparent\":\"00-2995a7d409844b5cd842abc9afc27a1f-6467490abcb032e4-01\"}}]",
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "06a0c3bc-3dfe-466f-a03a-03130f282236",
                "number": "0000202",
                "contractNum": "OT264",
                "status": "DONE",
                "statusDesc": "Готов",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "25.03.2024",
                "fileStatus": "DELETED",
                "notificationEmail": null,
                "errorMessage": null,
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "539230ec-0a58-4ea0-bb29-f0ca091f6cf3",
                "number": "0000201",
                "contractNum": "OT264",
                "status": "DONE",
                "statusDesc": "Готов",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "25.03.2024",
                "fileStatus": "DELETED",
                "notificationEmail": null,
                "errorMessage": null,
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "f873f0ce-37be-4852-a425-6c6b41e7e26a",
                "number": "0000200",
                "contractNum": "OT264",
                "status": "DONE",
                "statusDesc": "Готов",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "25.03.2024",
                "fileStatus": "DELETED",
                "notificationEmail": null,
                "errorMessage": null,
                "fileType": "XLS",
                "isFacsimile": false
            },
            {
                "id": "153fc752-4c1b-4cb4-89ec-31031092e722",
                "number": "0000199",
                "contractNum": "OT264",
                "status": "DONE",
                "statusDesc": "Готов",
                "reportTypeCode": "RECONCILIATION_REPORT",
                "reportTypeDescription": "Акт сверки взаиморасчетов",
                "period": "c 11.02.2024 по 12.03.2024",
                "dateCreated": "25.03.2024",
                "fileStatus": "DELETED",
                "notificationEmail": null,
                "errorMessage": null,
                "fileType": "XLS",
                "isFacsimile": false
            }
        ],
        "page": 1,
        "itemsPerPage": 10,
        "totalItems": 35,
        "search": [],
        "filterMap": {},
        "filterDate": {
            "dateFrom": null,
            "dateTo": null
        },
        "sortMap": {},
        "hiddenColumns": []
    }), [])
    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'))
With useCallback
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
With useCallback
Without useMemo
With useMemo
Child without memo
Child with memo

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0

Browser/OS: Firefox 125 on Linux

View result in a separate tab

With useCallback

285K/s

With useMemo

275K/s

Inline Function

214K/s

Without useMemo

162K/s

Child without memo

128K/s

Child with memo

126K/s

View exact numbers

Test name	Executions per second
✓ With useCallback	285,240 Ops/sec
With useMemo	275,251 Ops/sec
Inline Function	214,085 Ops/sec
Without useMemo	162,219 Ops/sec
Child without memo	127,582 Ops/sec
Child with memo	126,163 Ops/sec

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

LLMs can make mistakes. Check important info.

Based on the provided code snippets and benchmark results, I'll provide an analysis of the performance differences between various React hooks.

**Inline Functions**

The inline function `ComponentWithInlineFunction` appears to have the worst performance, with an average execution rate of 214.085 executions per second (FPS). This is likely due to the overhead of creating a new function on every render, which can lead to slower performance compared to other approaches.

**useCallback**

The `ComponentWithUseCallback` uses the `useCallback` hook to memoize the `childFunction`. On average, this component executes at 162.218 FPS, which is significantly faster than the inline function approach. This suggests that `useCallback` helps to optimize performance by caching the function and reusing it when possible.

**useMemo**

The `ComponentWithUseMemo` uses `useMemo` to memoize the `count` state variable. On average, this component executes at 127.582 FPS, which is slightly slower than the `useCallback` approach. However, this is still relatively fast performance considering the optimization provided by `useMemo`.

**Child without Memo**

The `ComponentWithoutMemorizedChild` renders a child component without memoization. The average execution rate for this component is 127.582 FPS, which is similar to the `useMemo` approach.

**Child with Memo**

The `ComponentWithMemorizedChild` uses a memoized child component, resulting in an average execution rate of 126.163 FPS. This suggests that memoization can provide significant performance benefits when used effectively.

In summary:

* Inline functions have the worst performance due to function overhead.
* `useCallback` provides better performance than inline functions by caching the function.
* `useMemo` offers slightly slower performance compared to `useCallback`, but still provides optimization benefits.
* Child components without memoization have similar performance to `useMemo`.
* Memoized child components provide the best performance, thanks to optimized rendering and caching.

Keep in mind that these results are specific to this benchmark scenario and may not generalize to all use cases. The choice of React hook or approach ultimately depends on the specific requirements and constraints of your application.

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

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

Created: 2 years ago by: Guest

Go to the latest result

Inline Function

With useCallback

Without useMemo

With useMemo

Child without memo

Child with memo

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 2 years ago by: Guest

Go to the latest result

Inline Function

With useCallback

Without useMemo

With useMemo

Child without memo

Child with memo

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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