MetaMask / MetaMask/metamask-mobile
Migrate the ~53 class components skipped by React Compiler (coverage debt)
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 1.7k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
> **Performance audit finding** · Severity: **Medium (tracking)** · Effort: Large (distributable) · Fix risk: Moderate per component · Test safety net: Partial
> Owner: per-component CODEOWNERS
> Scope: ~53 class components skipped by React Compiler
### What is this about?
React Compiler never compiles class components. At full enablement, #30919 counted **53 class components** silently skipped — they ship unoptimized and receive none of the automatic memoization the rest of the app now gets (~60% re-render reduction per #31171). None of the 2026-06-09 audit-run issues track this coverage debt, and it has no owner.
**Why it matters**
These components are permanently outside the compiler's coverage until migrated to function components. The skip is silent: nothing in CI or DevTools flags them, so the coverage gap persists invisibly (the logger proposed in the companion triage-tooling issue would make the count visible per build).
### Scenario
N/A — see Technical Details.
### Design
N/A — behavior-preserving migrations.
### Technical Details
Enumerate the current skip list (compiler logger output, or `grep -rln "extends (React\.)?(Pure)?Component" app --include="*.tsx" --include="*.js"`), rank by render frequency/surface (hot screens first), and migrate to function components with hooks. Distributable across teams per CODEOWNERS; each migration is independently shippable. The extension audit tracks the same debt class as MetaMask-planning#6548.
### Threat Modeling Framework
N/A — behavior-preserving refactors.
### Acceptance Criteria
- Skip-list enumerated and ranked; per-team checklists filed or appended here.
- Count trends down release over release; hot-surface components migrated first; each migration verified with a profiler pass (component gains `Memo ✨` after migration).
### References
- Evidence: metamask-mobile#30919 (53 skipped at enablement), #31171 (full enablement)
- Extension counterpart: MetaMask-planning#6548
- Source: `mms-performance` skill, `mm-react-compiler-error-triage` coverage accounting (MetaMask/skills#49)
- Status: tracking issue
Contributor guide
Research direction
Start by enumerating the skip list with the compiler logger or the provided grep command across app/*.tsx and app/*.js, then rank components by render frequency and surface. Check the relevant CODEOWNERS entries before selecting a component. Done means behavior-preserving migrations to function components, profiler verification showing Memo ✨, and an updated count or team checklist.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile, performance
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100