MetaMask / MetaMask/metamask-mobile

Migrate the ~53 class components skipped by React Compiler (coverage debt)

Open
#31,501 1 comment 0 reactions 0 assignees View on GitHub
area-performance Sev3 ta-triaged
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.