Skip to content

[Due for payment 2025-12-03] [$250] Encapsulate Magic Code Countdown to Prevent Form Re-renders #75135

Description

@mountiny

Coming from here

Background:

BaseValidateCodeForm currently orchestrates every sign-in state, subscribing to account, credential, and locale Onyx keys while presenting resend messaging governed by CONST.REQUEST_CODE_DELAY so customers know when they can request another code.

Problem:

When BaseValidateCodeForm owns the resend countdown state and the timer decrements each second, if the countdown updates, then the whole sign-in form re-renders.

Solution:

Factor the resend countdown into a dedicated ValidateCodeCountdown component that manages its own timer state so the form only re-renders on actual authentication state changes.

Performance Impact:

  • SignIn: The total duration of rendering during the entire countdown sequence was reduced ~57% (288ms -> 141ms)
  • After register: The total duration of rendering during the entire countdown sequence was reduced ~8% (183ms -> 168ms)
Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021989272206019457474
  • Upwork Job ID: 1989272206019457474
  • Last Price Increase: 2025-11-14
Issue OwnerCurrent Issue Owner: @lydiabarclay

Metadata

Metadata

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionBugSomething is broken. Auto assigns a BugZero manager.DailyKSv2ExternalAdded to denote the issue can be worked on by a contributor

Type

No type

Fields

No fields configured for issues without a type.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions