build: Enable React Compiler #37480
build: Enable React Compiler #37480
Conversation
|
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. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Caution MetaMask internal reviewing guidelines:
|
✨ Files requiring CODEOWNER review ✨🔑 @MetaMask/accounts-engineers (2 files, +5 -2)
👨🔧 @MetaMask/core-extension-ux (1 files, +0 -1)
🫰 @MetaMask/core-platform (1 files, +3 -0)
🎨 @MetaMask/design-system-engineers (2 files, +4 -1)
🧩 @MetaMask/extension-devs (7 files, +587 -266)
💎 @MetaMask/metamask-assets (2 files, +2 -4)
📜 @MetaMask/policy-reviewers (7 files, +587 -266)
Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. 🔗 @MetaMask/supply-chain (7 files, +587 -266)
|
|
https://github.com/SocketSecurity ignore npm/@babel/[email protected] https://github.com/SocketSecurity ignore npm/[email protected] npm/[email protected] |
MajorLift
changed the base branch from
main
to
jongsun/chore/251030-enable-rules-of-hooks
Builds ready [3eabf52]
UI Startup Metrics (1311 ± 102 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| })`; | ||
|
|
||
| return ComponentWithRouterHooks; | ||
| return useComponentWithRouterHooks; |
There was a problem hiding this comment.
Bug: Misnamed Component Violates React Hook Naming Conventions
The useComponentWithRouterHooks function is named like a React hook but is actually a component. This violates React naming conventions and can confuse tools like React Compiler and linters.
MajorLift
force-pushed
the
jongsun/chore/251030-enable-rules-of-hooks
branch
from
c9a849d to
d3c1f6e
Compare
MajorLift
force-pushed
the
jongsun/build/251103-enable-react-compiler
branch
from
3eabf52 to
765ad21
Compare
| export const getNetworkFees = async (notification: OnChainRawNotification) => { | ||
| export const getNetworkFees = async ( | ||
| notification: OnChainRawNotificationsWithNetworkFields, | ||
| ) => { |
There was a problem hiding this comment.
Bug: Redundant Type Guard Breaks Notification Safety
The function signature was changed to accept OnChainRawNotificationsWithNetworkFields instead of OnChainRawNotification, but inside the function there's still a type guard hasNetworkFeeFields(notification) that checks if the notification has network fee fields. This check will always pass due to the stricter type parameter, making the subsequent error throw unreachable. The type guard is now redundant and the error path can never execute, but more critically, this means callers could pass invalid notifications without type safety protection.
| confirmed: { | ||
| ...state.confirmed, | ||
| [action.ownerId]: {}, | ||
| [action.ownerId ?? '']: {}, |
There was a problem hiding this comment.
Bug: Undefined ownerId handling causes data collision
The action types changed ownerId from string to string | undefined, and the reducer uses [action.ownerId ?? ''] as a fallback. However, using an empty string as a key when ownerId is undefined will cause all undefined ownerIds to be grouped together under the same empty string key, potentially causing data corruption or unexpected behavior. This should either reject undefined ownerIds or use a more explicit sentinel value.
georgewrmarshall
left a comment
georgewrmarshall
left a comment
There was a problem hiding this comment.
Approving component library changes on behalf of the @MetaMask/design-system-engineers
github-project-automation
bot
moved this from Needs dev review
to Review finalised - Ready to be merged
in PR review queue
Description
This commit enables React Compiler. We can expect long-term UI performance benefits and developer time savings from this change. The Compiler passively and transparently adds memoization code for React components and hooks, among other optimizations, and enforces correctness of new code via the
react-compiler/react-compilerESLint rule.Due to the large size of the PR, I've created sub-PRs with meaningful commit histories that can be referenced during review. These correspond to the first four commits in this branch:
react-compiler/react-compilerESLint rule #37408react-compiler/react-compilerESLint rule #37388Review comments or suggestions made in the sub-PRs will be addressed/cherry-picked here. Approvals should be directed towards this PR.
Changelog
CHANGELOG entry: null (non-user facing but regressions possible)
Related issues
Fixes: #33059
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Enable React Compiler in the build (Babel/Webpack/ESLint) and refactor codebase, tests, and policies for compiler correctness and stability.
babel-plugin-react-compiler) and Webpack (react-compiler-webpack) with centralizedreactCompilerOptionsand targetedsourcesgating.react-compiler-runtimedependency and wire into build.eslint-plugin-react-compilerand enforcereact-compiler/react-compilerrule; bumpeslint-plugin-react/hooks.useMemo/useCallback, optional chaining, avoid mutation), cleanup of effect deps, and safe timer/abort handling.instanceof Array->Array.isArray, avoid mutating props/params, addkeyprops).useSafeChainsListValidationSelector→getUseSafeChainsListValidation,use4ByteResolutionSelector→getUse4ByteResolution); allow undefinedownerIdacross alerts flow.renderHook, new selectors, and mocking patterns.Written by Cursor Bugbot for commit 765ad21. This will update automatically on new commits. Configure here.