fix: prevent memory leaks in `useAsync` hooks
Description
Implements manual, explicit management of cache/state cleanup in useAsync{Callback,Result} instead of relying on React hooks. The motivation is to prevent memory leaks especially from large/frequent fetch requests.
(This only pertains to memory managed by react, not e.g. IndexedDB buildup due to fetchWithCache calls or background caching.)
- Cleanup function guarantees that e.g. fetch results are not kept in closure causing memory leaks.
- Wrap return array in
useMemo.- Mitigates issue of every
asyncFn/executecall allocating a new output object/array and holding onto the reference, potentially leading to memory leaks. - Prevent re-renders if
resultobject reference has changed but its properties haven't.
- Mitigates issue of every
- Executing
asyncFnRef.currentinstead ofasyncFn, and then explicitly cleaning it up ensures gc of long-lived async operations that could potentially hold on to component data references after unmount.
Optimizations:
- The reference to the
executecallback returned byuseAsyncCallbacknever needs to change if both itself and the reference toasyncFn(its only reactive variable that is external to the hook) are managed with refs. -
asyncFn,depspassed touseAsyncCallbackchange reference on every re-render. Use refs to maintain stable references throughout lifecycle, and only update if deps have changed.
Once we get to React v19, we may consider migrating entirely to use{,Transition,Optimistic,ActionState,FormStatus}, under the assumption that they provide safer memory management.
Related issues
-
https://github.com/MetaMask/metamask-extension/issues/33466-
https://github.com/MetaMask/metamask-extension/pull/33579 -
https://github.com/MetaMask/metamask-extension/pull/33577
-
Manual testing steps
- Go to this page...
Screenshots/Recordings
Before
After
Pre-merge author checklist
- [ ] I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using JSDoc format if applicable
- [ ] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
Pre-merge reviewer checklist
- [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.
Builds ready [dbd3854]
- builds: chrome, firefox
- builds (beta): chrome, firefox
- builds (flask): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- bundle size: Bundle Size Stats
- user-actions-benchmark: User Actions Stats
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
UI Startup Metrics (1219 ± 64 ms)
| Platform | BuildType | Page | Metric | Mean (ms) | Min (ms) | Max (ms) | Std Dev (ms) | P 75 (ms) | P 95 (ms) |
|---|---|---|---|---|---|---|---|---|---|
| Chrome | Browserify | Home | uiStartup | 1219 | 1091 | 1392 | 64 | 1258 | 1356 |
| load | 1060 | 941 | 1203 | 62 | 1088 | 1195 | |||
| domContentLoaded | 1053 | 933 | 1197 | 62 | 1081 | 1189 | |||
| domInteractive | 17 | 14 | 34 | 4 | 16 | 31 | |||
| firstPaint | 798 | 95 | 1205 | 397 | 1071 | 1186 | |||
| backgroundConnect | 7 | 4 | 32 | 5 | 7 | 21 | |||
| firstReactRender | 21 | 14 | 47 | 6 | 20 | 35 | |||
| getState | 14 | 6 | 33 | 7 | 19 | 27 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 0 | |||
| loadScripts | 807 | 698 | 945 | 60 | 834 | 928 | |||
| setupStore | 8 | 5 | 17 | 2 | 8 | 13 | |||
| Webpack | Home | uiStartup | 2019 | 1454 | 2518 | 241 | 2169 | 2442 | |
| load | 1573 | 1120 | 1926 | 191 | 1712 | 1865 | |||
| domContentLoaded | 1567 | 1115 | 1918 | 190 | 1708 | 1856 | |||
| domInteractive | 15 | 11 | 65 | 10 | 13 | 46 | |||
| firstPaint | 150 | 67 | 263 | 41 | 164 | 229 | |||
| backgroundConnect | 23 | 12 | 373 | 36 | 22 | 31 | |||
| firstReactRender | 134 | 45 | 354 | 107 | 117 | 346 | |||
| getState | 10 | 4 | 26 | 4 | 11 | 18 | |||
| initialActions | 2 | 1 | 4 | 1 | 3 | 3 | |||
| loadScripts | 1564 | 1109 | 1907 | 189 | 1704 | 1845 | |||
| setupStore | 48 | 7 | 324 | 96 | 17 | 310 | |||
| Firefox | Browserify | Home | uiStartup | 1308 | 1170 | 1532 | 81 | 1349 | 1479 |
| load | 1163 | 1027 | 1380 | 78 | 1211 | 1325 | |||
| domContentLoaded | 1163 | 1027 | 1380 | 78 | 1210 | 1325 | |||
| domInteractive | 99 | 34 | 166 | 25 | 111 | 145 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 20 | 13 | 53 | 6 | 21 | 28 | |||
| firstReactRender | 23 | 21 | 28 | 1 | 23 | 25 | |||
| getState | 8 | 4 | 38 | 5 | 8 | 11 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 1146 | 1017 | 1358 | 77 | 1195 | 1301 | |||
| setupStore | 7 | 4 | 38 | 6 | 6 | 11 | |||
| Webpack | Home | uiStartup | 1501 | 1338 | 1770 | 105 | 1569 | 1736 | |
| load | 1305 | 1155 | 1596 | 107 | 1367 | 1552 | |||
| domContentLoaded | 1305 | 1155 | 1596 | 107 | 1367 | 1551 | |||
| domInteractive | 81 | 33 | 181 | 20 | 87 | 121 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 21 | 15 | 80 | 7 | 22 | 26 | |||
| firstReactRender | 40 | 29 | 47 | 3 | 42 | 46 | |||
| getState | 9 | 4 | 31 | 6 | 9 | 29 | |||
| initialActions | 0 | 0 | 2 | 1 | 1 | 1 | |||
| loadScripts | 1287 | 1140 | 1578 | 108 | 1349 | 1534 | |||
| setupStore | 8 | 5 | 78 | 7 | 8 | 9 |
Benchmark value 1189 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded
Benchmark value 1186 exceeds gate value 1180 for chrome browserify home p95 firstPaint
Benchmark value 22 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 49 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 310 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 40 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 19ms | Sum of p95 exceeds: 269ms
Sum of all benchmark exceeds: 288ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 0 Bytes (0%)
- ui: 527 Bytes (0.01%)
- common: 264 Bytes (0%)
Builds ready [80becf1]
- builds: chrome, firefox
- builds (beta): chrome, firefox
- builds (flask): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- bundle size: Bundle Size Stats
- user-actions-benchmark: User Actions Stats
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
UI Startup Metrics (1225 ± 61 ms)
| Platform | BuildType | Page | Metric | Mean (ms) | Min (ms) | Max (ms) | Std Dev (ms) | P 75 (ms) | P 95 (ms) |
|---|---|---|---|---|---|---|---|---|---|
| Chrome | Browserify | Home | uiStartup | 1225 | 1128 | 1463 | 61 | 1255 | 1347 |
| load | 1060 | 939 | 1289 | 63 | 1095 | 1169 | |||
| domContentLoaded | 1053 | 933 | 1282 | 62 | 1089 | 1164 | |||
| domInteractive | 17 | 14 | 38 | 4 | 17 | 30 | |||
| firstPaint | 810 | 81 | 1294 | 397 | 1082 | 1169 | |||
| backgroundConnect | 8 | 4 | 35 | 6 | 8 | 25 | |||
| firstReactRender | 23 | 15 | 134 | 14 | 22 | 48 | |||
| getState | 15 | 6 | 71 | 9 | 20 | 32 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 0 | |||
| loadScripts | 804 | 683 | 1007 | 60 | 840 | 910 | |||
| setupStore | 9 | 5 | 29 | 5 | 9 | 20 | |||
| Webpack | Home | uiStartup | 2163 | 1707 | 2597 | 215 | 2304 | 2562 | |
| load | 1685 | 1322 | 2022 | 178 | 1795 | 1986 | |||
| domContentLoaded | 1679 | 1318 | 2018 | 177 | 1788 | 1976 | |||
| domInteractive | 17 | 11 | 94 | 13 | 13 | 54 | |||
| firstPaint | 154 | 61 | 405 | 60 | 183 | 265 | |||
| backgroundConnect | 21 | 10 | 40 | 6 | 24 | 33 | |||
| firstReactRender | 155 | 46 | 372 | 112 | 305 | 350 | |||
| getState | 18 | 5 | 325 | 43 | 14 | 25 | |||
| initialActions | 3 | 1 | 7 | 1 | 4 | 4 | |||
| loadScripts | 1676 | 1316 | 2016 | 176 | 1784 | 1964 | |||
| setupStore | 30 | 6 | 323 | 65 | 19 | 310 | |||
| Firefox | Browserify | Home | uiStartup | 1317 | 1173 | 1534 | 89 | 1380 | 1505 |
| load | 1169 | 1011 | 1394 | 89 | 1211 | 1366 | |||
| domContentLoaded | 1169 | 1010 | 1394 | 89 | 1211 | 1366 | |||
| domInteractive | 97 | 35 | 185 | 26 | 110 | 142 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 22 | 13 | 105 | 14 | 20 | 49 | |||
| firstReactRender | 23 | 20 | 55 | 5 | 24 | 27 | |||
| getState | 7 | 4 | 38 | 3 | 8 | 8 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 1149 | 996 | 1360 | 86 | 1192 | 1334 | |||
| setupStore | 6 | 4 | 39 | 4 | 6 | 12 | |||
| Webpack | Home | uiStartup | 1509 | 1325 | 1782 | 106 | 1596 | 1698 | |
| load | 1317 | 1145 | 1598 | 112 | 1418 | 1525 | |||
| domContentLoaded | 1316 | 1144 | 1598 | 112 | 1418 | 1524 | |||
| domInteractive | 80 | 32 | 175 | 18 | 88 | 116 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 20 | 16 | 41 | 4 | 21 | 26 | |||
| firstReactRender | 40 | 30 | 46 | 3 | 43 | 45 | |||
| getState | 8 | 5 | 30 | 4 | 8 | 10 | |||
| initialActions | 0 | 0 | 2 | 1 | 1 | 1 | |||
| loadScripts | 1298 | 1128 | 1581 | 112 | 1402 | 1508 | |||
| setupStore | 7 | 5 | 25 | 2 | 7 | 9 |
Benchmark value 25 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 48 exceeds gate value 45 for chrome browserify home p95 firstReactRender
Benchmark value 20 exceeds gate value 17 for chrome browserify home p95 setupStore
Benchmark value 2562 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 310 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 14ms | Sum of p95 exceeds: 366ms
Sum of all benchmark exceeds: 380ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 0 Bytes (0%)
- ui: 490 Bytes (0.01%)
- common: 264 Bytes (0%)
Builds ready [edc8ceb]
- builds: chrome, firefox
- builds (beta): chrome, firefox
- builds (flask): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- bundle size: Bundle Size Stats
- user-actions-benchmark: User Actions Stats
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
UI Startup Metrics (1206 ± 78 ms)
| Platform | BuildType | Page | Metric | Mean (ms) | Min (ms) | Max (ms) | Std Dev (ms) | P 75 (ms) | P 95 (ms) |
|---|---|---|---|---|---|---|---|---|---|
| Chrome | Browserify | Home | uiStartup | 1206 | 1088 | 1705 | 78 | 1245 | 1337 |
| load | 1051 | 929 | 1511 | 74 | 1085 | 1161 | |||
| domContentLoaded | 1045 | 922 | 1503 | 75 | 1079 | 1152 | |||
| domInteractive | 17 | 13 | 50 | 6 | 16 | 30 | |||
| firstPaint | 775 | 134 | 1509 | 409 | 1076 | 1160 | |||
| backgroundConnect | 8 | 4 | 26 | 5 | 7 | 24 | |||
| firstReactRender | 20 | 16 | 42 | 5 | 20 | 37 | |||
| getState | 13 | 5 | 26 | 6 | 19 | 25 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 801 | 684 | 1244 | 73 | 841 | 909 | |||
| setupStore | 8 | 5 | 18 | 2 | 8 | 13 | |||
| Webpack | Home | uiStartup | 2063 | 1656 | 2490 | 215 | 2193 | 2430 | |
| load | 1605 | 1216 | 1906 | 176 | 1736 | 1859 | |||
| domContentLoaded | 1599 | 1208 | 1897 | 176 | 1731 | 1848 | |||
| domInteractive | 16 | 11 | 61 | 10 | 13 | 48 | |||
| firstPaint | 156 | 61 | 305 | 49 | 188 | 255 | |||
| backgroundConnect | 25 | 11 | 425 | 41 | 24 | 35 | |||
| firstReactRender | 119 | 45 | 351 | 88 | 118 | 321 | |||
| getState | 14 | 4 | 304 | 30 | 12 | 22 | |||
| initialActions | 5 | 1 | 243 | 24 | 3 | 4 | |||
| loadScripts | 1596 | 1205 | 1886 | 174 | 1728 | 1837 | |||
| setupStore | 53 | 7 | 315 | 98 | 19 | 311 | |||
| Firefox | Browserify | Home | uiStartup | 1307 | 1165 | 1576 | 72 | 1341 | 1447 |
| load | 1166 | 1035 | 1429 | 74 | 1207 | 1308 | |||
| domContentLoaded | 1166 | 1035 | 1429 | 74 | 1206 | 1308 | |||
| domInteractive | 99 | 36 | 191 | 26 | 110 | 145 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 19 | 13 | 51 | 5 | 20 | 28 | |||
| firstReactRender | 22 | 20 | 36 | 2 | 23 | 26 | |||
| getState | 8 | 4 | 63 | 6 | 8 | 9 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 1149 | 1021 | 1401 | 72 | 1191 | 1290 | |||
| setupStore | 7 | 4 | 36 | 5 | 6 | 13 | |||
| Webpack | Home | uiStartup | 1475 | 1350 | 1926 | 96 | 1506 | 1657 | |
| load | 1284 | 1171 | 1713 | 94 | 1316 | 1465 | |||
| domContentLoaded | 1284 | 1171 | 1712 | 94 | 1315 | 1465 | |||
| domInteractive | 77 | 53 | 126 | 14 | 83 | 107 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 20 | 15 | 40 | 4 | 21 | 28 | |||
| firstReactRender | 40 | 29 | 48 | 3 | 42 | 45 | |||
| getState | 8 | 5 | 32 | 5 | 9 | 17 | |||
| initialActions | 0 | 0 | 2 | 1 | 1 | 1 | |||
| loadScripts | 1266 | 1155 | 1685 | 94 | 1296 | 1449 | |||
| setupStore | 7 | 5 | 11 | 1 | 7 | 9 |
Benchmark value 53 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 311 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 40 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 23ms | Sum of p95 exceeds: 252ms
Sum of all benchmark exceeds: 275ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 0 Bytes (0%)
- ui: 483 Bytes (0.01%)
- common: 264 Bytes (0%)
Builds ready [55c7c3b]
- builds: chrome, firefox
- builds (beta): chrome, firefox
- builds (flask): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- bundle size: Bundle Size Stats
- user-actions-benchmark: User Actions Stats
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
UI Startup Metrics (1227 ± 63 ms)
| Platform | BuildType | Page | Metric | Mean (ms) | Min (ms) | Max (ms) | Std Dev (ms) | P 75 (ms) | P 95 (ms) |
|---|---|---|---|---|---|---|---|---|---|
| Chrome | Browserify | Home | uiStartup | 1227 | 1107 | 1370 | 63 | 1269 | 1338 |
| load | 1066 | 957 | 1213 | 61 | 1098 | 1182 | |||
| domContentLoaded | 1059 | 953 | 1206 | 62 | 1089 | 1178 | |||
| domInteractive | 17 | 13 | 32 | 4 | 17 | 29 | |||
| firstPaint | 698 | 132 | 1207 | 434 | 1081 | 1182 | |||
| backgroundConnect | 8 | 4 | 39 | 6 | 7 | 24 | |||
| firstReactRender | 20 | 16 | 36 | 3 | 20 | 25 | |||
| getState | 15 | 6 | 38 | 8 | 20 | 28 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 812 | 709 | 954 | 61 | 846 | 927 | |||
| setupStore | 8 | 5 | 22 | 3 | 8 | 13 | |||
| Webpack | Home | uiStartup | 2055 | 1613 | 2674 | 231 | 2189 | 2451 | |
| load | 1588 | 1271 | 2039 | 180 | 1694 | 1902 | |||
| domContentLoaded | 1583 | 1267 | 2027 | 179 | 1690 | 1899 | |||
| domInteractive | 16 | 11 | 81 | 12 | 13 | 47 | |||
| firstPaint | 153 | 60 | 314 | 55 | 177 | 275 | |||
| backgroundConnect | 20 | 10 | 41 | 6 | 22 | 35 | |||
| firstReactRender | 139 | 46 | 367 | 107 | 138 | 344 | |||
| getState | 14 | 4 | 310 | 30 | 12 | 19 | |||
| initialActions | 3 | 1 | 5 | 1 | 3 | 4 | |||
| loadScripts | 1580 | 1266 | 2016 | 177 | 1688 | 1897 | |||
| setupStore | 49 | 6 | 318 | 94 | 18 | 311 | |||
| Firefox | Browserify | Home | uiStartup | 1310 | 1147 | 1575 | 72 | 1353 | 1446 |
| load | 1163 | 1024 | 1394 | 70 | 1201 | 1316 | |||
| domContentLoaded | 1163 | 1024 | 1393 | 70 | 1201 | 1316 | |||
| domInteractive | 94 | 36 | 185 | 22 | 104 | 135 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 20 | 14 | 104 | 11 | 20 | 47 | |||
| firstReactRender | 23 | 21 | 28 | 2 | 23 | 27 | |||
| getState | 7 | 4 | 9 | 1 | 7 | 8 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 1145 | 1009 | 1326 | 68 | 1187 | 1293 | |||
| setupStore | 6 | 4 | 24 | 3 | 6 | 11 | |||
| Webpack | Home | uiStartup | 1520 | 1366 | 1783 | 92 | 1590 | 1707 | |
| load | 1326 | 1188 | 1587 | 93 | 1391 | 1518 | |||
| domContentLoaded | 1326 | 1187 | 1587 | 93 | 1391 | 1518 | |||
| domInteractive | 80 | 63 | 148 | 13 | 86 | 104 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 19 | 15 | 28 | 2 | 21 | 23 | |||
| firstReactRender | 41 | 27 | 60 | 4 | 43 | 45 | |||
| getState | 8 | 5 | 30 | 4 | 8 | 10 | |||
| initialActions | 0 | 0 | 1 | 0 | 1 | 1 | |||
| loadScripts | 1308 | 1171 | 1569 | 94 | 1374 | 1503 | |||
| setupStore | 8 | 5 | 31 | 4 | 8 | 9 |
Benchmark value 25 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 49 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 311 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 20ms | Sum of p95 exceeds: 255ms
Sum of all benchmark exceeds: 275ms
Bundle size diffs
- background: 0 Bytes (0%)
- ui: 531 Bytes (0.01%)
- common: 0 Bytes (0%)
Builds ready [bf70edd]
- builds: chrome, firefox
- builds (beta): chrome, firefox
- builds (flask): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- bundle size: Bundle Size Stats
- user-actions-benchmark: User Actions Stats
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
UI Startup Metrics (1203 ± 64 ms)
| Platform | BuildType | Page | Metric | Mean (ms) | Min (ms) | Max (ms) | Std Dev (ms) | P 75 (ms) | P 95 (ms) |
|---|---|---|---|---|---|---|---|---|---|
| Chrome | Browserify | Home | uiStartup | 1203 | 1092 | 1375 | 64 | 1251 | 1304 |
| load | 1049 | 934 | 1221 | 63 | 1093 | 1144 | |||
| domContentLoaded | 1043 | 930 | 1218 | 63 | 1089 | 1138 | |||
| domInteractive | 17 | 13 | 36 | 5 | 16 | 31 | |||
| firstPaint | 746 | 128 | 1207 | 404 | 1069 | 1119 | |||
| backgroundConnect | 7 | 4 | 25 | 4 | 7 | 20 | |||
| firstReactRender | 19 | 13 | 64 | 5 | 20 | 24 | |||
| getState | 13 | 6 | 34 | 7 | 18 | 27 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 799 | 690 | 980 | 63 | 849 | 899 | |||
| setupStore | 7 | 4 | 15 | 2 | 7 | 13 | |||
| Webpack | Home | uiStartup | 2047 | 1646 | 2635 | 224 | 2159 | 2450 | |
| load | 1608 | 1256 | 2153 | 197 | 1753 | 1942 | |||
| domContentLoaded | 1603 | 1252 | 2148 | 196 | 1749 | 1933 | |||
| domInteractive | 16 | 12 | 66 | 11 | 13 | 50 | |||
| firstPaint | 157 | 62 | 372 | 57 | 187 | 285 | |||
| backgroundConnect | 23 | 13 | 336 | 32 | 22 | 34 | |||
| firstReactRender | 124 | 46 | 374 | 104 | 96 | 362 | |||
| getState | 10 | 5 | 26 | 3 | 11 | 16 | |||
| initialActions | 5 | 1 | 302 | 30 | 3 | 3 | |||
| loadScripts | 1600 | 1251 | 2133 | 195 | 1747 | 1922 | |||
| setupStore | 47 | 7 | 318 | 93 | 17 | 314 | |||
| Firefox | Browserify | Home | uiStartup | 1331 | 1189 | 1665 | 81 | 1376 | 1474 |
| load | 1185 | 1043 | 1541 | 79 | 1228 | 1312 | |||
| domContentLoaded | 1184 | 1043 | 1541 | 79 | 1227 | 1312 | |||
| domInteractive | 98 | 36 | 207 | 29 | 111 | 150 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 21 | 13 | 103 | 11 | 21 | 38 | |||
| firstReactRender | 23 | 20 | 30 | 2 | 23 | 29 | |||
| getState | 7 | 5 | 36 | 3 | 8 | 9 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 1165 | 1028 | 1517 | 79 | 1204 | 1299 | |||
| setupStore | 5 | 4 | 11 | 1 | 6 | 9 | |||
| Webpack | Home | uiStartup | 1535 | 1315 | 1778 | 112 | 1617 | 1738 | |
| load | 1344 | 1148 | 1591 | 115 | 1438 | 1559 | |||
| domContentLoaded | 1344 | 1148 | 1590 | 114 | 1437 | 1559 | |||
| domInteractive | 79 | 43 | 174 | 15 | 85 | 106 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 20 | 15 | 42 | 3 | 21 | 26 | |||
| firstReactRender | 41 | 30 | 57 | 4 | 43 | 47 | |||
| getState | 8 | 5 | 28 | 3 | 8 | 10 | |||
| initialActions | 0 | 0 | 1 | 0 | 1 | 1 | |||
| loadScripts | 1326 | 1134 | 1573 | 115 | 1419 | 1541 | |||
| setupStore | 7 | 5 | 31 | 3 | 7 | 8 |
Benchmark value 47 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 314 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 18ms | Sum of p95 exceeds: 251ms
Sum of all benchmark exceeds: 269ms
Bundle size diffs
- background: 0 Bytes (0%)
- ui: 531 Bytes (0.01%)
- common: 0 Bytes (0%)
Builds ready [37d5ed6]
- builds: chrome, firefox
- builds (beta): chrome, firefox
- builds (flask): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- bundle size: Bundle Size Stats
- user-actions-benchmark: User Actions Stats
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
UI Startup Metrics (1204 ± 69 ms)
| Platform | BuildType | Page | Metric | Mean (ms) | Min (ms) | Max (ms) | Std Dev (ms) | P 75 (ms) | P 95 (ms) |
|---|---|---|---|---|---|---|---|---|---|
| Chrome | Browserify | Home | uiStartup | 1204 | 1096 | 1562 | 69 | 1245 | 1302 |
| load | 1047 | 956 | 1360 | 63 | 1091 | 1130 | |||
| domContentLoaded | 1041 | 935 | 1347 | 62 | 1087 | 1122 | |||
| domInteractive | 17 | 13 | 35 | 5 | 16 | 30 | |||
| firstPaint | 683 | 70 | 1168 | 423 | 1053 | 1116 | |||
| backgroundConnect | 7 | 4 | 40 | 4 | 7 | 10 | |||
| firstReactRender | 19 | 16 | 45 | 3 | 20 | 22 | |||
| getState | 12 | 5 | 32 | 7 | 17 | 26 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 796 | 701 | 1090 | 60 | 840 | 883 | |||
| setupStore | 8 | 5 | 17 | 2 | 8 | 13 | |||
| Webpack | Home | uiStartup | 2045 | 1603 | 2484 | 212 | 2184 | 2415 | |
| load | 1592 | 1265 | 1978 | 164 | 1702 | 1827 | |||
| domContentLoaded | 1587 | 1261 | 1974 | 164 | 1698 | 1819 | |||
| domInteractive | 16 | 11 | 53 | 10 | 13 | 48 | |||
| firstPaint | 151 | 59 | 370 | 55 | 181 | 244 | |||
| backgroundConnect | 22 | 13 | 259 | 24 | 23 | 32 | |||
| firstReactRender | 135 | 45 | 356 | 106 | 131 | 346 | |||
| getState | 9 | 4 | 22 | 3 | 11 | 16 | |||
| initialActions | 5 | 1 | 284 | 28 | 3 | 4 | |||
| loadScripts | 1584 | 1260 | 1964 | 162 | 1692 | 1809 | |||
| setupStore | 39 | 7 | 318 | 83 | 16 | 309 | |||
| Firefox | Browserify | Home | uiStartup | 1340 | 1178 | 1613 | 84 | 1387 | 1515 |
| load | 1191 | 1053 | 1438 | 81 | 1231 | 1348 | |||
| domContentLoaded | 1191 | 1052 | 1438 | 81 | 1231 | 1348 | |||
| domInteractive | 97 | 36 | 200 | 26 | 109 | 139 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 21 | 13 | 97 | 12 | 21 | 28 | |||
| firstReactRender | 23 | 20 | 52 | 4 | 24 | 27 | |||
| getState | 7 | 4 | 12 | 1 | 8 | 10 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 1172 | 1036 | 1393 | 78 | 1214 | 1336 | |||
| setupStore | 6 | 4 | 38 | 4 | 6 | 10 | |||
| Webpack | Home | uiStartup | 1468 | 1307 | 1742 | 93 | 1510 | 1650 | |
| load | 1278 | 1135 | 1561 | 94 | 1314 | 1465 | |||
| domContentLoaded | 1277 | 1134 | 1560 | 94 | 1314 | 1464 | |||
| domInteractive | 77 | 42 | 149 | 16 | 86 | 103 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 20 | 15 | 44 | 4 | 21 | 25 | |||
| firstReactRender | 39 | 29 | 47 | 4 | 42 | 46 | |||
| getState | 9 | 5 | 31 | 5 | 9 | 28 | |||
| initialActions | 0 | 0 | 1 | 0 | 1 | 1 | |||
| loadScripts | 1259 | 1119 | 1543 | 95 | 1292 | 1446 | |||
| setupStore | 8 | 5 | 60 | 6 | 8 | 10 |
Benchmark value 309 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 40 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 9ms | Sum of p95 exceeds: 244ms
Sum of all benchmark exceeds: 253ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 0 Bytes (0%)
- ui: 481 Bytes (0.01%)
- common: 1 Bytes (0%)
Builds ready [12a4653]
- builds: chrome, firefox
- builds (beta): chrome, firefox
- builds (flask): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- bundle size: Bundle Size Stats
- user-actions-benchmark: User Actions Stats
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
UI Startup Metrics (1218 ± 63 ms)
| Platform | BuildType | Page | Metric | Mean (ms) | Min (ms) | Max (ms) | Std Dev (ms) | P 75 (ms) | P 95 (ms) |
|---|---|---|---|---|---|---|---|---|---|
| Chrome | Browserify | Home | uiStartup | 1218 | 1098 | 1379 | 63 | 1261 | 1326 |
| load | 1053 | 910 | 1181 | 65 | 1101 | 1162 | |||
| domContentLoaded | 1047 | 899 | 1176 | 65 | 1096 | 1156 | |||
| domInteractive | 17 | 13 | 37 | 5 | 16 | 32 | |||
| firstPaint | 699 | 73 | 1181 | 431 | 1088 | 1163 | |||
| backgroundConnect | 6 | 4 | 24 | 2 | 7 | 9 | |||
| firstReactRender | 24 | 16 | 155 | 19 | 21 | 38 | |||
| getState | 13 | 6 | 45 | 8 | 20 | 29 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 803 | 665 | 935 | 65 | 856 | 905 | |||
| setupStore | 8 | 5 | 18 | 3 | 9 | 14 | |||
| Webpack | Home | uiStartup | 2143 | 1661 | 2584 | 209 | 2240 | 2528 | |
| load | 1681 | 1294 | 2068 | 184 | 1802 | 1961 | |||
| domContentLoaded | 1675 | 1290 | 2062 | 184 | 1797 | 1949 | |||
| domInteractive | 16 | 12 | 66 | 11 | 13 | 51 | |||
| firstPaint | 169 | 64 | 597 | 90 | 210 | 283 | |||
| backgroundConnect | 21 | 10 | 39 | 6 | 24 | 35 | |||
| firstReactRender | 137 | 46 | 368 | 108 | 118 | 355 | |||
| getState | 11 | 5 | 35 | 5 | 12 | 19 | |||
| initialActions | 11 | 1 | 304 | 48 | 3 | 5 | |||
| loadScripts | 1672 | 1288 | 2061 | 182 | 1795 | 1942 | |||
| setupStore | 48 | 7 | 339 | 95 | 19 | 317 | |||
| Firefox | Browserify | Home | uiStartup | 1362 | 1217 | 1583 | 73 | 1406 | 1503 |
| load | 1207 | 1066 | 1459 | 73 | 1246 | 1365 | |||
| domContentLoaded | 1206 | 1066 | 1459 | 73 | 1246 | 1364 | |||
| domInteractive | 105 | 37 | 312 | 33 | 110 | 158 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 22 | 14 | 97 | 10 | 22 | 42 | |||
| firstReactRender | 24 | 21 | 59 | 4 | 24 | 29 | |||
| getState | 7 | 4 | 12 | 1 | 8 | 10 | |||
| initialActions | 0 | 0 | 1 | 0 | 0 | 1 | |||
| loadScripts | 1186 | 1052 | 1446 | 74 | 1228 | 1348 | |||
| setupStore | 6 | 4 | 22 | 3 | 6 | 11 | |||
| Webpack | Home | uiStartup | 1465 | 1311 | 1764 | 88 | 1502 | 1661 | |
| load | 1277 | 1138 | 1570 | 90 | 1319 | 1466 | |||
| domContentLoaded | 1277 | 1138 | 1570 | 90 | 1319 | 1466 | |||
| domInteractive | 75 | 54 | 128 | 14 | 77 | 108 | |||
| firstPaint | NaN | NaN | NaN | NaN | NaN | NaN | |||
| backgroundConnect | 20 | 16 | 40 | 3 | 21 | 24 | |||
| firstReactRender | 39 | 34 | 56 | 3 | 41 | 44 | |||
| getState | 8 | 4 | 32 | 5 | 8 | 27 | |||
| initialActions | 0 | 0 | 1 | 0 | 1 | 1 | |||
| loadScripts | 1259 | 1124 | 1549 | 91 | 1302 | 1452 | |||
| setupStore | 7 | 5 | 9 | 1 | 7 | 8 |
Benchmark value 11 exceeds gate value 7 for chrome webpack home mean initialActions
Benchmark value 48 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2528 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 317 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 40 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 23ms | Sum of p95 exceeds: 326ms
Sum of all benchmark exceeds: 349ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 0 Bytes (0%)
- ui: 3.14 KiB (0.04%)
- common: 1.47 KiB (0.02%)