perf(mobile): usage screens compile with the React Compiler

[juliusmarminge]

The React Compiler skipped both usage screens (UsageRouteScreen, UsageLimitsSection) because they used try/finally around an await for cleanup, and the compiler does not handle a try without catch.

Stacked on #20967. Part of the React Compiler ratchet from #20967.

The cleanup now runs as .finally() on the awaited promise. That keeps the same semantics: a rejection still propagates, and the cleanup runs first. With every file in features/usage now compiling, its 11 useMemo/useCallback calls are gone, and both files are removed from KNOWN_BAILOUTS (88 to 86).

Verified with vp test run src/reactCompilerCoverage.test.ts plus the feature's own tests, mobile typecheck, and lint on the changed files. Measured on an Android emulator below.

Measurement

Scenario: --route /settings/usage (the Limits tab with one Codex account). Device: Android emulator, Pixel 9 API 36, on nucbox-1, with Metro and an isolated seeded server on cups; dev client rebuilt from #20967 today. Harness: --route scenario from #21001 at 4dee0fbead. Each run reloads the app on Home, starts the counter, opens the route with an app link and records 6 s covering mount and data settling. Median of 3. Both sides sit on the same base, main 13aa882c22 plus the stack below; "before" is the parent PR head, "after" is this PR head. Before: #20967 at 7f7d6390d6. After: 3d3872ca45.

Runs (renders/commits): before 1498/16, 1498/17, 1560/17. After 1607/18, 1498/17, 1498/17.

	before	after	Δ
renders	1498	1498	0
commits	17	17	0
renders per commit	92	88	-4 (one run with 16 commits; noise)

Usage components, one probe run per side with the same window:

Component	before	after
UsageRouteScreen	7	7
UsageLimitsSection	7	7
AccountSegment	7	7
SubscriptionUsageCoordinator	3	3
SegmentedControl	2	2

Cause	before	after
AccountSegment parent-same-props<-View	6	6
UsageRouteScreen state#4	5	5
UsageLimitsSection state#0	4	4
SubscriptionUsageCoordinator state#4	2	2
UsageRouteScreen state#11	1	1

What it means: no measurable change. The 11 manual memos this PR deletes were already doing what the compiler now does, so renders stay the same while the code gets simpler. Every render of the usage screens here comes from its own state updates as limits load, which no memoization can skip.

Claude Opus 5.5 via Claude Code.

🤖 Generated with Claude Code

[github-actions]

Thread transfer impact

⚠️ The latest CI run did not produce a thread transfer result for 3d3872c.

This comment will update automatically after the next completed run.

[macroscopeapp]

Approvability

Verdict: Approved at 38e2041

Macroscope's review found this PR approvable — This is a contained React Compiler compatibility refactor that preserves the existing usage UI, refresh flows, and cleanup behavior while removing obsolete manual memoization. It introduces no new capability, product-default change, schema change, or static-analysis suppression.

No code changes detected at 3d3872c. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Team
• Run ID: 8af6de30-7b66-4bc1-866b-08149ac10e21

📥 Commits

Reviewing files that changed from the base of the PR and between 400cad6 and 38e2041.

📒 Files selected for processing: 5

• apps/mobile/src/features/usage/UsageDailyChart.ios.tsx
• apps/mobile/src/features/usage/UsageDailyChart.tsx
• apps/mobile/src/features/usage/UsageLimitsSection.tsx
• apps/mobile/src/features/usage/UsageRouteScreen.tsx
• apps/mobile/src/reactCompilerCoverage.test.ts

💤 Files with no reviewable changes: 1

• apps/mobile/src/reactCompilerCoverage.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 6 remain after this review.

📝 Walkthrough

The usage charts and route screen now calculate chart data and environment controls directly during render. Refresh and enable operations use Promise.finally for cleanup. The compiler coverage test no longer lists two usage components as known bailouts.

Changes: Usage Screen Updates

Layer / File(s)	Summary
Direct chart data calculation apps/mobile/src/features/usage/UsageDailyChart.ios.tsx, apps/mobile/src/features/usage/UsageDailyChart.tsx	Both chart components build chart data during render instead of using useMemo.
Usage route calculations and environment controls apps/mobile/src/features/usage/UsageRouteScreen.tsx	The route calculates chart data, environment actions, and the environment filter directly during render. Environment selection still toggles the selected environment, and “All environments” clears the selection.
Promise cleanup and compiler coverage apps/mobile/src/features/usage/UsageLimitsSection.tsx, apps/mobile/src/features/usage/UsageRouteScreen.tsx, apps/mobile/src/reactCompilerCoverage.test.ts	Refresh operations and the enable action use Promise.finally for cleanup. The compiler coverage test no longer lists the usage limits and route components as known bailouts.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Refactor

Suggested reviewers: maria-rcks

Merge Risk: ⚪ Minimal · up to 38e20

The usage-screen changes are ready to merge after normal checks; no concrete regression remains identified.

Pre-merge checks: 4

Check name	Status	Explanation
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Title check		The title clearly and concisely describes the primary change: enabling React Compiler compilation for the mobile usage screens.
Description check		The description is mostly complete. It explains the problem, implementation, verification, measurements, scope context, and agent usage. The content does not use the template headings, and it does not…

Full details: Description check

Explanation

The description is mostly complete. It explains the problem, implementation, verification, measurements, scope context, and agent usage. The content does not use the template headings, and it does not include an explicit maintainer approval comment for the stacked change, but these omissions do not make the description largely incomplete.

✨ Finishing Touches: 💡 1

🛠️ Fix failing CI checks: 💡

• Commit to this branch
• Create a new PR

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}