refactor: Migrate <Routes /> into a TypeScript functional component
#33276
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
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. |
MajorLift
force-pushed
the
chore/react-router-v6/250515-convert-Routes-to-function-component
branch
3 times, most recently
from
45d3620 to
783ca0f
Compare
MajorLift
force-pushed
the
chore/react-router-v6/250515-convert-Routes-to-function-component
branch
from
783ca0f to
5d3e0e3
Compare
HowardBraham
added
the
no-changelog
HowardBraham
changed the title
<Routes /> to a functional component<Routes /> to a functional component
MajorLift
force-pushed
the
chore/react-router-v6/250515-convert-Routes-to-function-component
branch
3 times, most recently
from
ed73ed0 to
6d31be1
Compare
Collaborator
Builds ready [6d31be1]
UI Startup Metrics (1141 ± 55 ms)
Benchmark value 3 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 230 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 9 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2495 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 1869 exceeds gate value 1711 for chrome webpack home mean load Benchmark value 1861 exceeds gate value 1704 for chrome webpack home mean domContentLoaded Benchmark value 31 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 10 exceeds gate value 7 for chrome webpack home mean initialActions Benchmark value 1856 exceeds gate value 1699 for chrome webpack home mean loadScripts Benchmark value 2908 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 2209 exceeds gate value 2030 for chrome webpack home p95 load Benchmark value 2183 exceeds gate value 2005 for chrome webpack home p95 domContentLoaded Benchmark value 58 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 403 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 241 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 11 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 2179 exceeds gate value 1970 for chrome webpack home p95 loadScripts Benchmark value 180 exceeds gate value 65 for chrome webpack home p95 setupStore Benchmark value 26 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 11 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 21 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 33 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 28 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 48 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 3 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 234 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 66 exceeds gate value 49 for firefox webpack home p95 backgroundConnect Benchmark value 59 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 11 exceeds gate value 2 for firefox webpack home p95 initialActions Benchmark value 30 exceeds gate value 28 for firefox webpack home p95 setupStore Sum of mean exceeds: 1003ms | Sum of p95 exceeds: 1578.8ms Sum of all benchmark exceeds: 2581.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
MajorLift
force-pushed
the
chore/react-router-v6/250515-convert-Routes-to-function-component
branch
from
5f9927d to
fb0e406
Compare
Collaborator
Builds ready [fb0e406]
UI Startup Metrics (1140 ± 70 ms)
Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 225 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 32 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2284 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 30 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 2582 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 60 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 396 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 281 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 10 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 256 exceeds gate value 65 for chrome webpack home p95 setupStore Benchmark value 27 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 5 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 239 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 17 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 30 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 30 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 50 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 248 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 59 exceeds gate value 49 for firefox webpack home p95 backgroundConnect Benchmark value 58 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 18 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 324ms | Sum of p95 exceeds: 862.8ms Sum of all benchmark exceeds: 1186.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [9555ad4]
UI Startup Metrics (1199 ± 72 ms)
Benchmark value 4 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 43 exceeds gate value 41 for chrome browserify home p95 domInteractive Benchmark value 233 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 14 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 18 exceeds gate value 17 for chrome browserify home p95 setupStore Benchmark value 2507 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 68 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 384 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 242 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 9 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 28 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 206 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 41 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 14 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 34 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 33 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 49 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 3 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 1964 exceeds gate value 1935 for firefox webpack home p95 uiStartup Benchmark value 238 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 81 exceeds gate value 49 for firefox webpack home p95 backgroundConnect Benchmark value 60 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 10 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 236ms | Sum of p95 exceeds: 565.8ms Sum of all benchmark exceeds: 801.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
MajorLift
force-pushed
the
chore/react-router-v6/250515-convert-Routes-to-function-component
branch
from
96befdc to
a90abd1
Compare
Collaborator
Builds ready [5ca8ae6]
UI Startup Metrics (1106 ± 51 ms)
Benchmark value 3 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 247 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 11 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2505 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 68 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 386 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 271 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 11 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 273 exceeds gate value 65 for chrome webpack home p95 setupStore Benchmark value 28 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 3 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 207 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 25 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 11 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 35 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 1676 exceeds gate value 1615 for firefox webpack home mean uiStartup Benchmark value 1398 exceeds gate value 1380 for firefox webpack home mean load Benchmark value 1398 exceeds gate value 1380 for firefox webpack home mean domContentLoaded Benchmark value 107 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 37 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 52 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 1369 exceeds gate value 1360 for firefox webpack home mean loadScripts Benchmark value 2041 exceeds gate value 1935 for firefox webpack home p95 uiStartup Benchmark value 1699 exceeds gate value 1660 for firefox webpack home p95 load Benchmark value 1698 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded Benchmark value 247 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 94 exceeds gate value 49 for firefox webpack home p95 backgroundConnect Benchmark value 63 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 37 exceeds gate value 32 for firefox webpack home p95 getState Benchmark value 11 exceeds gate value 2 for firefox webpack home p95 initialActions Benchmark value 1647 exceeds gate value 1630 for firefox webpack home p95 loadScripts Benchmark value 32 exceeds gate value 28 for firefox webpack home p95 setupStore Sum of mean exceeds: 351ms | Sum of p95 exceeds: 1001.8ms Sum of all benchmark exceeds: 1352.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [6dbf846]
UI Startup Metrics (1198 ± 59 ms)
Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 236 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 15 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2217 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 33 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 2662 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 382 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 263 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 9 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 276 exceeds gate value 65 for chrome webpack home p95 setupStore Benchmark value 29 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 11 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 221 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 12 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 35 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 30 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 56 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 250 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 68 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 14 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 277ms | Sum of p95 exceeds: 900.8ms Sum of all benchmark exceeds: 1177.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
MajorLift
moved this from Needs more work from the author
to Review in progress
in PR review queue
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
…add null and property checks instead
Collaborator
Builds ready [2c740d2]
UI Startup Metrics (1171 ± 63 ms)
Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 224 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 18 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2497 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 382 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 273 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 9 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 29 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 5 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 220 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 13 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 40 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 31 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 57 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 258 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 67 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 15 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 245ms | Sum of p95 exceeds: 538.8ms Sum of all benchmark exceeds: 783.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
MajorLift
force-pushed
the
chore/react-router-v6/250515-convert-Routes-to-function-component
branch
from
9b3c3f4 to
2da9b28
Compare
Collaborator
Builds ready [2da9b28]
UI Startup Metrics (1197 ± 62 ms)
Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 236 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 17 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2311 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 1746 exceeds gate value 1711 for chrome webpack home mean load Benchmark value 1739 exceeds gate value 1704 for chrome webpack home mean domContentLoaded Benchmark value 1734 exceeds gate value 1699 for chrome webpack home mean loadScripts Benchmark value 2635 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 389 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 251 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 13 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 28 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 231 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 26 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 16 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 43 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 104 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 31 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 57 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 8 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 261 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 70 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 26 exceeds gate value 2 for firefox webpack home p95 initialActions Benchmark value 36 exceeds gate value 28 for firefox webpack home p95 setupStore Sum of mean exceeds: 476ms | Sum of p95 exceeds: 720.8ms Sum of all benchmark exceeds: 1196.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [aeeb1c6]
UI Startup Metrics (1161 ± 61 ms)
Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 230 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 15 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2373 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 1773 exceeds gate value 1711 for chrome webpack home mean load Benchmark value 1766 exceeds gate value 1704 for chrome webpack home mean domContentLoaded Benchmark value 32 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 1761 exceeds gate value 1699 for chrome webpack home mean loadScripts Benchmark value 2694 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 392 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 246 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 16 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 1990 exceeds gate value 1970 for chrome webpack home p95 loadScripts Benchmark value 242 exceeds gate value 65 for chrome webpack home p95 setupStore Benchmark value 29 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 3 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 215 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 14 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 37 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 103 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 29 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 56 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 256 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 64 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 12 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 611ms | Sum of p95 exceeds: 910.8ms Sum of all benchmark exceeds: 1521.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
MajorLift
changed the title
<Routes /> into a functional TypeScript component<Routes /> into a TypeScript functional component
7 tasks
Collaborator
Builds ready [2864c6e]
UI Startup Metrics (1172 ± 61 ms)
Benchmark value 3 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 228 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 11 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2347 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 1770 exceeds gate value 1711 for chrome webpack home mean load Benchmark value 1763 exceeds gate value 1704 for chrome webpack home mean domContentLoaded Benchmark value 34 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 9 exceeds gate value 7 for chrome webpack home mean initialActions Benchmark value 1758 exceeds gate value 1699 for chrome webpack home mean loadScripts Benchmark value 2702 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 2039 exceeds gate value 2030 for chrome webpack home p95 load Benchmark value 2019 exceeds gate value 2005 for chrome webpack home p95 domContentLoaded Benchmark value 78 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 341 exceeds gate value 334 for chrome webpack home p95 firstPaint Benchmark value 390 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 283 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 11 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 2010 exceeds gate value 1970 for chrome webpack home p95 loadScripts Benchmark value 29 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 3 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 32 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 13 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 49 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 30 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 53 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 5 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 241 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 63 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 16 exceeds gate value 2 for firefox webpack home p95 initialActions Benchmark value 29 exceeds gate value 28 for firefox webpack home p95 setupStore Sum of mean exceeds: 575ms | Sum of p95 exceeds: 824.8ms Sum of all benchmark exceeds: 1399.8ms Bundle size diffs [🚀 Bundle size reduced!]
|
MajorLift
commented
Aug 12, 2025
Contributor
Author
MajorLift
left a comment
MajorLift
left a comment
There was a problem hiding this comment.
Notes for reviewers:
Comment on lines
+94
to
+95
| export const useAppSelector: TypedUseSelectorHook<MetaMaskReduxState> = | ||
| useSelector; |
Contributor
Author
There was a problem hiding this comment.
Added a typed hook as recommended by the redux docs. We should phase out useSelector usage in favor of this hook, and progressively replace existing usages as well.
https://react-redux.js.org/using-react-redux/usage-with-typescript#define-typed-hooks
| } from '../../helpers/constants/routes'; | ||
| import { | ||
| getProviderConfig, | ||
| isNetworkLoading as getIsNetworkLoading, |
Contributor
Author
There was a problem hiding this comment.
We should rename this selector at some point.
Comment on lines
+151
to
+161
| // TODO: Fix `as unknown as` casting once `mmLazy` is updated to handle named exports, wrapped components, and other React module types. | ||
| // Casting is preferable over `@ts-expect-error` annotations in this case, | ||
| // because it doesn't suppress competing error messages e.g. "Cannot find module..." | ||
|
|
||
| // Begin Lazy Routes | ||
| const OnboardingFlow = mmLazy( | ||
| (() => | ||
| import( | ||
| '../onboarding-flow/onboarding-flow.js' | ||
| )) as unknown as DynamicImportType, | ||
| ); |
Contributor
Author
There was a problem hiding this comment.
The type casting here isn't optimal, but given that fixing mmLazy is out-of-scope for this PR and this issue doesn't affect runtime functionality, it seems like an acceptable workaround.
| import('../keychains/restore-vault.js')) as unknown as DynamicImportType, | ||
| ); | ||
| const ImportSrpPage = mmLazy( | ||
| // TODO: This is a named export. Fix incorrect type casting once `mmLazy` is updated to handle non-default export types. |
Contributor
Author
There was a problem hiding this comment.
mmLazy is currently typed to only accept modules where the default export is a React component. Because of this, we're forced to use an incorrect type here. At the very least, we'll need to update mmLazy to handle React components that are named exports.
| // End Lazy Routes | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| export default function Routes() { |
Contributor
Author
There was a problem hiding this comment.
Routesdoes not take any props.- Interfacing with the redux store and
react-routerAPIs, as well as all stateful/reactive logic are handled with hooks in the component body.
Comment on lines
+392
to
+466
| const prevPropsRef = useRef({ isUnlocked, totalUnapprovedConfirmationCount }); | ||
|
|
||
| useEffect(() => { | ||
| const prevProps = prevPropsRef.current; | ||
|
|
||
| // Automatically switch the network if the user | ||
| // no longer has unapproved transactions and they | ||
| // should be on a different network for the | ||
| // currently active tab's dapp | ||
| if ( | ||
| networkToAutomaticallySwitchTo && | ||
| totalUnapprovedConfirmationCount === 0 && | ||
| (prevProps.totalUnapprovedConfirmationCount > 0 || | ||
| (prevProps.isUnlocked === false && isUnlocked)) | ||
| ) { | ||
| dispatch(automaticallySwitchNetwork(networkToAutomaticallySwitchTo)); | ||
| } | ||
|
|
||
| prevPropsRef.current = { isUnlocked, totalUnapprovedConfirmationCount }; | ||
| }, [ | ||
| networkToAutomaticallySwitchTo, | ||
| isUnlocked, | ||
| totalUnapprovedConfirmationCount, | ||
| dispatch, | ||
| ]); | ||
|
|
||
| useEffect(() => { | ||
| // Terminate the popup when another popup is opened | ||
| // if the user is using RPC queueing | ||
| if ( | ||
| currentExtensionPopupId !== undefined && | ||
| 'metamask' in global && | ||
| typeof global.metamask === 'object' && | ||
| global.metamask && | ||
| 'id' in global.metamask && | ||
| global.metamask.id !== undefined && | ||
| currentExtensionPopupId !== global.metamask.id | ||
| ) { | ||
| window.close(); | ||
| } | ||
| }, [currentExtensionPopupId]); | ||
|
|
||
| useEffect(() => { | ||
| const windowType = getEnvironmentType(); | ||
| const { openExtensionInBrowser } = globalThis.platform ?? {}; | ||
| if ( | ||
| showExtensionInFullSizeView && | ||
| windowType === ENVIRONMENT_TYPE_POPUP && | ||
| openExtensionInBrowser | ||
| ) { | ||
| openExtensionInBrowser(); | ||
| } | ||
| }, [showExtensionInFullSizeView]); | ||
|
|
||
| useEffect(() => { | ||
| const unlisten = history.listen((locationObj: Location, action: 'PUSH') => { | ||
| if (action === 'PUSH') { | ||
| dispatch(pageChanged(locationObj.pathname)); | ||
| } | ||
| }); | ||
|
|
||
| return () => { | ||
| unlisten(); | ||
| }; | ||
| }, [history, dispatch]); | ||
|
|
||
| useEffect(() => { | ||
| setTheme(theme); | ||
| }, [theme]); | ||
|
|
||
| useEffect(() => { | ||
| if (!currentCurrency) { | ||
| dispatch(setCurrentCurrency('usd')); | ||
| } | ||
| }, [currentCurrency, dispatch]); |
Contributor
Author
There was a problem hiding this comment.
Side effects have been placed in separate useEffect hooks to prevent unnecessary re-renders triggered by unrelated dependencies.
See https://www.diffchecker.com/W5mhBkOY for diff.
Comment on lines
+453
to
+455
| return () => { | ||
| unlisten(); | ||
| }; |
Contributor
Author
There was a problem hiding this comment.
Added a cleanup function to prevent memory leaks.
Comment on lines
+650
to
+666
| const isLoadingShown = | ||
| isLoading && | ||
| completedOnboarding && | ||
| ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) | ||
| !pendingConfirmations.some( | ||
| (confirmation: Confirmation) => | ||
| confirmation.type === | ||
| SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES.showSnapAccountRedirect, | ||
| ) && | ||
| ///: END:ONLY_INCLUDE_IF | ||
| // In the redesigned screens, we hide the general loading spinner and the | ||
| // loading states are on a component by component basis. | ||
| !isCorrectApprovalType && | ||
| !isCorrectTransactionType && | ||
| // We don't want to show the loading screen on the deep link route, as it | ||
| // is already a fullscreen interface. | ||
| !isShowingDeepLinkRoute; |
Contributor
Author
There was a problem hiding this comment.
Refactored for deduplication. Original code:
let isLoadingShown =
isLoading &&
completedOnboarding &&
// In the redesigned screens, we hide the general loading spinner and the
// loading states are on a component by component basis.
!isCorrectApprovalType &&
!isCorrectTransactionType &&
// We don't want to show the loading screen on the deep link route, as it
// is already a fullscreen interface.
!isShowingDeepLinkRoute;
///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
isLoadingShown =
isLoading &&
completedOnboarding &&
!pendingConfirmations.some(
(confirmation) =>
confirmation.type ===
SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES.showSnapAccountRedirect,
) &&
// In the redesigned screens, we hide the general loading spinner and the
// loading states are on a component by component basis.
!isCorrectApprovalType &&
!isCorrectTransactionType &&
// We don't want to show the loading spinner on the deep link route, as it
// is already a fullscreen interface.
!isShowingDeepLinkRoute;
///: END:ONLY_INCLUDE_IF
DDDDDanica
approved these changes
Aug 12, 2025
HowardBraham
approved these changes
Aug 13, 2025
Contributor
HowardBraham
left a comment
HowardBraham
left a comment
There was a problem hiding this comment.
This was a beast, but I think we got it now!
github-project-automation
bot
moved this from Review in progress
to Review finalised - Ready to be merged
in PR review queue
DDDDDanica
deleted the
chore/react-router-v6/250515-convert-Routes-to-function-component
branch
metamaskbot
added
the
release-13.2.0
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Note for Reviewers
The bulk of the changes in this PR are in
ui/pages/routes/routes.component.tsx. Unfortunately, GitHub is failing to recognize that this file was renamed fromui/pages/routes/routes.component.js, even with agit mvcommit establishing this fact: 1f91b8c.routes.component.tsxfile (751 lines) are being counted as additions, instead of just the changed lines (454 lines).Motivation
The
<Routes />component handles routing and navigation between our application's pages and url paths. Despite its importance, it remains written in JavaScript as a class component, and relies on a HOC for access to Redux state properties and actions, all of which are outdated patterns.Description
This commit achieves the following:
<Routes />into a functional component that uses hooks, and can directly interface with the Redux store using selectors and dispatched actions.<Routes />to strict TypeScript.useAppSelector, a typed version of theuseSelectorhook, toui/store/store.ts.These changes represent a significant improvement in maintainability, type safety, and future extensibility. This migration also unblocks the
react-routerv6 upgrade effort, which requires class components to be converted to functional components.Related issues
See [EPIC] Improve user experience and app responsiveness. #31459<Routes />toreact-routerv6 #35030Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist