Run results for: React Hooks vs. Inline, useMemo, memo 4

Run details:

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

Browser: Firefox 125

Operating system: Linux

Device Platform: Desktop

Date tested: 6 months ago

Test name	Executions per second
Inline Function	214085.2 Ops/sec
With useCallback	285240.2 Ops/sec
Without useMemo	162218.9 Ops/sec
With useMemo	275250.8 Ops/sec
Child without memo	127582.2 Ops/sec
Child with memo	126163.3 Ops/sec

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'))

Run results for: React Hooks vs. Inline, useMemo, memo 4

Inline Function

With useCallback

Without useMemo

With useMemo

Child without memo

Child with memo