Typed Email State for React Signups

Email verification in React components traditionally starts with a single boolean flag, isVerified. While adequate for simple demos, production signup flows require a more nuanced approach. Browser interactions with verification codes, expired links, retry prompts, and response handling need distinct states. Overloading a few booleans can lead to UI promises that cannot be fulfilled.

Using TypeScript, a discriminated union helps model these states explicitly. A type EmailState can represent idle, sending, waiting, verified, expired, or error scenarios, each carrying relevant data like the submission address, request identifiers, or error messages. This structure ensures only one active state exists at any time, preventing accidental combinations like "loading and expired".

For instance, a "sending" state disables the submit button, while "waiting" informs users to check their inbox. An "expired" state provides a clear "resend" option without pretending the old link remains valid. This explicit model also clarifies copy decisions, specifying whether a message was sent, is pending, or requires another attempt.

To avoid stale responses, each verification request should carry a unique request ID. The component records this ID and ignores responses that no longer match the current request. A small error message handles failures gracefully. This approach prevents scenarios where a late response overwrites a newer state, causing visible inconsistencies.

Furthermore, AbortController can be employed to cancel older requests cleanly, but reacting to cancellation alone is insufficient. The system must also react to successful completions, ensuring the UI reflects the latest state.

Accessibility is crucial in communicating verification states. Use aria-live regions to announce status changes like "waiting," "verified," or "expired." Avoid relying solely on color to differentiate states, and ensure error messages are clear and specific. Tests should verify the transition between states under various conditions, including late responses and duplicate submissions. This comprehensive testing ensures the component behaves predictably, providing a reliable user experience across all verification scenarios.