Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
React Hooks vs. Inline, useMemo, memo 4
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=523661" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Browser:
Chrome 122
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
Inline Function
400012.8 Ops/sec
With useCallback
494620.2 Ops/sec
Without useMemo
249672.1 Ops/sec
With useMemo
488035.0 Ops/sec
Child without memo
274430.3 Ops/sec
Child with memo
283562.9 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'))