{
  "id": 9776069,
  "title": "Typed Email State for React Signups",
  "url": "https://urgent.news/2026/09/25/typed-email-state-for-react-signups",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-25T14:23:46.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ryanlee91/typed-email-state-for-react-signups-5gp1"
  },
  "original_language": "en",
  "account": "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.\n\nUsing 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\".\n\nFor 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.\n\nTo 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.\n\nFurthermore, 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.\n\nAccessibility 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.",
  "summary": "Email verification is usually introduced to a React component as one boolean: isVerified . That works for a demo, but a production signup flow has more states than verified or not verified. The browser may be waiting for a message, polling for a code, showing an expired link, handling a retry, or receiving a response from an older request. If all of those cases are squeezed into a few booleans,…",
  "key_points": [
    "Email verification in React uses discriminated union type EmailState for explicit states.",
    "Sending state disables submit button, waiting informs users to check inbox.",
    "Expired state provides clear resend option, preventing stale responses."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}