Plan React 19 alignment (Compiler + Actions)

[fpigeonjr]

React 19 Alignment (Compiler + Actions)

Summary

Create a plan and execute incremental adoption of React 19 features, starting with React Compiler in dev/CI and then adopting Actions APIs in a small set of high‑value flows.

Scope

• Enable React Compiler behind a build flag (dev/CI on, prod off initially)
• Adopt React 19 Actions APIs (useActionState, useFormStatus, useOptimistic) in selected flows
• Verify React 19 error‑handling behavior remains acceptable

Phases

Phase 1 — React Compiler Integration

• Add React Compiler dependency
• Wire into Vite Babel chain (compiler first)
• Add build flag (e.g., VITE_REACT_COMPILER)
• Enable in dev/CI only
• Validate in DevTools + CI

Phase 2 — Actions Adoption

• Convert 1–2 core forms to Actions + useFormStatus
• Apply useOptimistic to one high‑value flow

Phase 3 — Error Handling Alignment

• Confirm React 19 error callbacks/logging behavior is acceptable
• Ensure logs include minimal context

Proposed Steps

1. Add React Compiler dependency and wire into Vite Babel chain
2. Add env flag (e.g., VITE_REACT_COMPILER) and default enable in dev/CI
3. Validate in DevTools (Memo badges) and CI tests
4. Convert 1–2 core forms to Actions + useFormStatus
5. Convert one optimistic flow to useOptimistic
6. Re‑confirm error logging behavior in React 19

Acceptance Criteria

• Compiler enabled in dev/CI without regressions; prod remains opt‑out initially
• At least one primary form uses Actions + useFormStatus
• One optimistic flow uses useOptimistic
• CI and targeted E2E specs pass