Skip to content

chore(settings): Update to React 19 - #20963

Draft
xlisachan wants to merge 4 commits into
PAY-3633from
PAY-3887
Draft

chore(settings): Update to React 19#20963
xlisachan wants to merge 4 commits into
PAY-3633from
PAY-3887

Conversation

@xlisachan

@xlisachan xlisachan commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Because

This pull request

Issue that this pull request solves

Closes: (issue number)

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).
  • I have manually reviewed all AI generated code.

How to review (Optional)

  • Key files/areas to focus on:
  • Suggested review order:
  • Risky or complex parts:

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

Any other information that is important to this pull request.

@xlisachan
xlisachan force-pushed the PAY-3887 branch 10 times, most recently from 43e383d to 64873ba Compare August 5, 2026 14:50
@xlisachan
xlisachan force-pushed the PAY-3887 branch 4 times, most recently from 80bdd5c to 6c60b0e Compare August 5, 2026 18:03
Copilot AI reviewed Aug 5, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the FxA monorepo (notably fxa-settings) to React 19, including related ecosystem updates (React DOM root API, react-hook-form v7, test library changes) and a set of render-time navigation guards refactored into useEffect to comply with React 19 constraints.

Changes:

  • Upgrade React/React DOM and types to React 19; migrate app bootstrap to createRoot.
  • Migrate fxa-settings forms to react-hook-form v7 patterns (formState.errors, register('field'), new InputText API via registration).
  • Refactor multiple containers to avoid calling navigation during render; update unit/functional tests and Jest transforms/mocks for React 19 compatibility.

Reviewed changes

Copilot reviewed 88 out of 89 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
yarn.lock Dependency graph updates for React 19 + related package upgrades.
package.json Bump React/React DOM/types; adjust resolutions; add postinstall step.
packages/fxa-settings/package.json Upgrade react-hook-form/@react-pdf; add Jest mapper for ESM-only @react-pdf/renderer.
packages/fxa-settings/config/jest/reactPdfMock.js Stub @react-pdf/renderer for Jest.
packages/fxa-settings/config/jest/fileTransform.js Update non-JS asset transformer to React 19-compatible element creation.
packages/fxa-settings/src/index.tsx Switch to createRoot; disable StrictMode due to WebAuthn ceremony behavior changes.
packages/fxa-settings/src/pages/Signup/index.tsx RHF v7 migration (errors moved to formState.errors).
packages/fxa-settings/src/pages/Signup/container.tsx Move redirect navigation from render to useEffect.
packages/fxa-settings/src/pages/Signup/container.test.tsx Make redirect assertion async (waitFor) due to effect-driven navigation.
packages/fxa-settings/src/pages/Signin/index.tsx RHF v7 registration changes for password field.
packages/fxa-settings/src/pages/Signin/container.tsx Move redirect navigation from render to useEffect.
packages/fxa-settings/src/pages/Signin/SigninUnblock/container.tsx Move redirect navigation from render to useEffect; formatting cleanup.
packages/fxa-settings/src/pages/Signin/SigninTotpCode/container.tsx Freeze redirect decision via useRef; move navigation to useEffect; tighten signinState typing.
packages/fxa-settings/src/pages/Signin/SigninTotpCode/container.test.tsx Make redirect assertions async; update imports.
packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/container.test.tsx Update expectations for React 19 mock call signature; reduce brittle assertions.
packages/fxa-settings/src/pages/Signin/SigninPasskeyFallback/index.tsx RHF v7 migration; surface password error from formState.errors.
packages/fxa-settings/src/pages/ResetPassword/ResetPassword/index.tsx RHF v7 registration change for email input.
packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.tsx RHF v7 migration (errors moved to formState.errors).
packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/container.tsx Move redirects from render to useEffect; refactor redirect conditions.
packages/fxa-settings/src/pages/ResetPassword/ResetPasswordConfirmed/container.tsx Move redirects from render to useEffect; return null while redirect pending.
packages/fxa-settings/src/pages/ResetPassword/ResetPasswordRecoveryChoice/container.test.tsx Update expectations for React 19 mock call signature.
packages/fxa-settings/src/pages/ResetPassword/AccountRecoveryConfirmKey/index.tsx RHF v7 registration change for recovery key input.
packages/fxa-settings/src/pages/PostVerify/SetPassword/index.tsx RHF v7 migration (errors moved to formState.errors).
packages/fxa-settings/src/pages/PostVerify/SetPassword/container.tsx Move redirects from render to useEffect; compute guard conditions upfront.
packages/fxa-settings/src/pages/PostVerify/SetPassword/container.test.tsx Stabilize assertions for concurrent rendering; broaden fxaLogin assertion shape.
packages/fxa-settings/src/pages/InlineRecoverySetupFlow/container.tsx Add cancellation guard for async refresh; move redirects into a single effect.
packages/fxa-settings/src/pages/InlineRecoverySetupFlow/container.test.tsx Simplify mocks and formatting; update async expectations.
packages/fxa-settings/src/pages/Index/index.tsx RHF v7 registration change for email input.
packages/fxa-settings/src/lib/test-utils.ts Remove lazy helper from test utils.
packages/fxa-settings/src/lib/lazy.ts New shared lazy helper implementation using UNINITIALIZED sentinel.
packages/fxa-settings/src/lib/lazy.test.ts Unit tests for new lazy helper behavior.
packages/fxa-settings/src/lib/account-storage.ts Switch lazy import to new shared helper module.
packages/fxa-settings/src/lib/passkeys/signin-flow.test.tsx Move to @testing-library/react renderHook; tighten banner/link typing.
packages/fxa-settings/src/lib/hooks/useTotpSetup/index.tsx Deduplicate server mutation across strict-mode/effect double-invokes via in-flight ref.
packages/fxa-settings/src/lib/hooks/useThrottle/index.tsx Initialize useRef explicitly for React 19 typings.
packages/fxa-settings/src/lib/hooks/useThrottle/index.test.tsx Move renderHook import to @testing-library/react.
packages/fxa-settings/src/lib/hooks/useOAuthFlowRecovery/index.test.tsx Move renderHook import to @testing-library/react; formatting cleanup.
packages/fxa-settings/src/lib/hooks/useFxAStatus/index.test.tsx Replace waitForNextUpdate with waitFor assertions.
packages/fxa-settings/src/lib/hooks.tsx Relax ref object type to allow null (`RefObject<HTMLButtonElement
packages/fxa-settings/src/components/ThirdPartyAuth/index.tsx Replace ReactElement import source (react instead of react-markdown).
packages/fxa-settings/src/components/OAuthClientFeatureFlag/index.tsx Replace ReactElement import source (react instead of react-markdown).
packages/fxa-settings/src/components/IconListItem/index.tsx Replace ReactElement import source (react instead of react-markdown).
packages/fxa-settings/src/components/MarkdownLegal/index.tsx Strengthen react-markdown component typings using intrinsic element props.
packages/fxa-settings/src/components/Settings/index.tsx Refactor redirect logic to useMemo + useEffect; JSX formatting changes.
packages/fxa-settings/src/components/Settings/index.test.tsx Mock VerifiedSessionGuard; update navigation expectations for effect-based redirects.
packages/fxa-settings/src/components/Settings/MfaGuard/index.tsx Avoid onDismiss() for INSUFFICIENT_AAL to prevent navigation races under batching.
packages/fxa-settings/src/components/Settings/PageSecondaryEmailVerify/index.tsx Eagerly read formState fields to ensure RHF proxy subscription; RHF v7 registration changes.
packages/fxa-settings/src/components/Settings/PageSecondaryEmailVerify/index.test.tsx Use userEvent + waitFor to align with concurrent rendering timing.
packages/fxa-settings/src/components/Settings/PageDisplayName/index.tsx Eagerly read formState fields; RHF v7 registration change.
packages/fxa-settings/src/components/Settings/PageDeleteAccount/index.tsx Eagerly read formState fields; RHF v7 registration change.
packages/fxa-settings/src/components/Settings/PageDeleteAccount/index.test.tsx Replace helper typing with userEvent flows + async waits; fix act usage.
packages/fxa-settings/src/components/Settings/PageCreatePassword/index.tsx RHF v7 migration (errors moved to formState.errors).
packages/fxa-settings/src/components/Settings/PageChangePassword/index.tsx RHF v7 migration (errors moved to formState.errors); eager reads of formState fields.
packages/fxa-settings/src/components/Settings/PageAvatar/index.tsx Replace MUI Slider with native input[type=range]; update handler type.
packages/fxa-settings/src/components/Settings/Page2faSetup/index.test.tsx Ensure mocked account refresh() exists; async expectations for step render.
packages/fxa-settings/src/components/Settings/ModalVerifySession/index.tsx RHF v7 registration change.
packages/fxa-settings/src/components/Settings/ModalMfaProtected/index.tsx RHF v7 registration change.
packages/fxa-settings/src/components/Settings/SubRow/index.tsx RHF v7 registration change for passkey rename input.
packages/fxa-settings/src/components/Settings/ConnectedServices/index.tsx Type/formatting cleanup; adjust event target cast.
packages/fxa-settings/src/components/Settings/ButtonIcon/index.stories.tsx Update Storybook decorator typing.
packages/fxa-settings/src/components/Settings/AlertBar/index.tsx JSDoc return type aligns with React 19 typings.
packages/fxa-settings/src/components/Settings/FlowRecoveryKeyConfirmPwd/index.tsx Eager formState reads; RHF v7 registration change.
packages/fxa-settings/src/components/RecoveryKeySetupHint/index.tsx RHF v7 registration change.
packages/fxa-settings/src/components/InputText/index.tsx Add RHF v7 registration prop; ensure registration handlers run before component handlers.
packages/fxa-settings/src/components/InputText/snapshots/index.test.tsx.snap Snapshot update due to controlled/uncontrolled behavior changes.
packages/fxa-settings/src/components/InputPassword/index.tsx Prop surface aligned with updated InputText registration pattern.
packages/fxa-settings/src/components/InputPhoneNumber/index.tsx RHF v7 migration; formatting/setValue behavior updated.
packages/fxa-settings/src/components/FormVerifyTotp/index.tsx Use setValue to keep filtered DOM value aligned with RHF state; improved submit disable logic.
packages/fxa-settings/src/components/FormVerifyCode/index.tsx RHF v7 migration; replace watch/effect validation with inline setValue + regex check.
packages/fxa-settings/src/components/FormSetupAccount/interfaces.ts Update RHF v7 types for shared form props.
packages/fxa-settings/src/components/FormPhoneNumber/index.tsx Eager isDirty read; unchanged behavior otherwise.
packages/fxa-settings/src/components/FormPhoneNumber/index.test.tsx Add async wait for enabled submit in concurrent rendering.
packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.tsx RHF v7 type updates; eager formState reads; registration migration.
packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/mocks.tsx RHF v7 migration (errors moved to formState.errors).
packages/fxa-settings/src/components/FormPassword/index.tsx RHF v7 type updates; eager formState reads; registration migration.
packages/fxa-settings/src/components/FormPassword/mocks.tsx RHF v7 migration (errors moved to formState.errors).
packages/fxa-settings/src/components/FormChoice/index.tsx RHF v7 register spread usage; formatting fix.
packages/fxa-settings/src/components/LinkExpired/index.stories.tsx Update Storybook decorator typing.
packages/fxa-react/jest.config.js Point SVG transform at shared React 19-compatible transformer.
packages/fxa-react/svg-transform.js Remove redundant CRA-derived transformer file.
packages/fxa-react/configs/rescripts.js Override CRA file transform to avoid React 19 element incompatibility.
packages/fxa-react/lib/hooks.tsx Initialize useRef explicitly for React 19 typings.
packages/fxa-react/lib/test-utils/localizationProvider.tsx Broaden children type from JSX.Element to ReactElement.
packages/fxa-admin-panel/package.json Add react-hook-form v7 dependency.
packages/fxa-admin-panel/src/components/PageRateLimiting/index.tsx RHF v7 register spread usage for inputs.
packages/fxa-admin-panel/src/components/TableXHeaders/index.tsx Tighten React.isValidElement typing for table cells.
packages/functional-tests/pages/baseTokenCode.ts Make locator more specific; retry fill to handle React 19 remount behavior.
libs/payments/ui/src/lib/client/components/CouponForm/index.tsx Replace useFormState with useActionState for React 19.
libs/payments/ui/src/lib/client/components/CouponForm/index.test.tsx Update mocks for useActionState; minor formatting changes.

Comment thread packages/fxa-settings/src/components/InputText/index.tsx
Comment on lines +147 to 150
const refToCall = registrationRefLatest.current || inputRef;
if (refToCall && typeof refToCall === 'function') {
refToCall(element);
}
Comment thread packages/fxa-settings/src/components/InputPhoneNumber/index.tsx
Comment on lines 198 to 200
{/* Because the country code may not be unique, the above `select`'s `value` must
be by country ID. This hidden input allows us to access it in the form data. */}
<input
type="hidden"
name="countryCode"
value={selectedCountry.code}
ref={register()}
/>
<InputText
Comment thread package.json
Comment on lines 6 to 9
"scripts": {
"preinstall": "_scripts/check-package-manager.sh && _scripts/check-node-version.sh",
"postinstall": "rm -f node_modules/react-markdown/lib/complex-types.ts",
"authors": "git shortlog -s | cut -c8- | sort -f > AUTHORS",
@xlisachan
xlisachan force-pushed the PAY-3633 branch 4 times, most recently from 626459a to f719832 Compare August 5, 2026 21:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments
@vpomerleau vpomerleau Awaiting requested review from vpomerleau

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@xlisachan