MetaMask / MetaMask/metamask-mobile

React Compiler full power

Open
#17,114 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### What is this about?

To take full benefit in all components of the React Compiler, we need to address the disablements of react rules on eslint.

Image

The rule `react-compiler/react-compiler` must be an error and not a warning on our eslint configuration

Currently, we have 76 errors

Image

Advantages of addressing this:
* Performance overall for the components that are not benefiting from react compiler
* Avoid regressions easily

**Approach Suggestion**
Split errors between teams for them to easy address those.

Components:
app/component-library/components/Avatars/Avatar/variants/AvatarToken/AvatarToken.tsx
app/component-library/providers/ThemeProvider/ThemeProvider.test.tsx
app/components/Base/RemoteImage/index.js
app/components/Nav/Main/RootRPCMethodsUI.js
app/components/Nav/Main/index.js
app/components/Snaps/SnapUIAssetSelector/useSnapAssetDisplay.tsx
app/components/UI/AssetSearch/index.tsx
app/components/UI/CaipAccountSelectorList/CaipAccountSelectorList.test.tsx
app/components/UI/CollectibleModal/CollectibleModal.tsx
app/components/UI/Confetti/index.js
app/components/UI/Earn/Views/EarnInputView/EarnInputView.tsx
app/components/UI/Earn/Views/EarnLendingDepositConfirmationView/index.tsx
app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/index.tsx
app/components/UI/Earn/Views/EarnWithdrawInputView/EarnWithdrawInputView.tsx
app/components/UI/EvmAccountSelectorList/EvmAccountSelectorList.test.tsx
app/components/UI/HardwareWallet/AccountSelector/hooks.tsx
app/components/UI/LedgerModals/LedgerConfirmationModal.tsx
app/components/UI/LedgerModals/LedgerTransactionModal.tsx
app/components/UI/Ramp/Aggregator/Views/OrderDetails/OrderDetails.tsx
app/components/UI/Ramp/Aggregator/components/ErrorView.tsx
app/components/UI/Ramp/Aggregator/hooks/useSDKMethod.ts
app/components/UI/Ramp/Deposit/Views/BankDetails/BankDetails.tsx
app/components/UI/Ramp/Deposit/Views/DepositOrderDetails/DepositOrderDetails.tsx
app/components/UI/Ramp/Deposit/hooks/useDepositSdkMethod.ts
app/components/UI/Ramp/Deposit/sdk/index.test.tsx
app/components/UI/Ramp/Deposit/sdk/index.tsx
app/components/UI/SimulationDetails/useSimulationMetrics.ts
app/components/UI/Stake/hooks/usePoolStakedDeposit/index.ts
app/components/UI/Stake/sdk/stakeSdkProvider.test.tsx
app/components/UI/Swaps/QuotesView.js
app/components/UI/Swaps/components/ApprovalTransactionEditionModal.js
app/components/UI/Swaps/index.js
app/components/UI/Tokens/TokenList/TokenListItem/index.tsx
app/components/Views/AddAsset/AddAsset.tsx
app/components/Views/ConnectHardware/SelectHardware/index.tsx
app/components/Views/ImportFromSecretRecoveryPhrase/index.js
app/components/Views/LedgerConnect/Scan.tsx
app/components/Views/LedgerConnect/index.tsx
app/components/Views/Login/index.tsx
app/components/Views/ManualBackupStep1/index.js
app/components/Views/NftDetails/NftDetails.tsx
app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
app/components/Views/Settings/DeveloperOptions/index.tsx
app/components/Views/Settings/ExperimentalSettings/index.tsx
app/components/Views/Wallet/index.tsx
app/components/Views/confirmations/hooks/metrics/useConfirmationLocation.ts
app/components/Views/confirmations/hooks/useGetTokenStandardAndDetails.ts
app/components/hooks/Ledger/useBluetoothDevices.ts
app/components/hooks/useAccounts/useAccounts.ts
app/components/hooks/useAddressBalance/useAddressBalance.ts
app/components/hooks/useAsyncResult.ts
app/components/hooks/useBluetoothPermissions.ts
app/components/hooks/useEndTraceOnMount.ts
app/components/hooks/usePolling.ts
app/components/hooks/useTokenBalance.tsx

### Scenario

_No response_

### Design

_No response_

### Technical Details

_No response_

### Threat Modeling Framework

_No response_

### Acceptance Criteria

_No response_

### Stakeholder review needed before the work gets merged

- [ ] Engineering (needed in most cases)
- [ ] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)

### References

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the listed TypeScript and JavaScript components and the ESLint configuration, then inspect the 76 reported react-compiler/react-compiler errors. Resolve the disablements across the listed files and make the rule an error rather than a warning; done means the affected lint errors are addressed and the checks pass.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, javascript, react, typescript
Domain
frontend, tooling
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.