How to Stop Duplicate React Mention Emails

Duplicate mention emails look like a minor glitch until they erode user trust, and the root cause is usually a React state edge: optimistic UI updates and network-retry paths quietly trigger two separate notification jobs for a single comment action. Because the composer state, a debounced save, the mutation confirmation, and the background mail worker all act somewhat independently, one click can produce two outbound emails.

The fix described isn't a rewrite but a narrow contract: the client generates one eventId, the API persists it with the comment write, and the worker refuses to resend if that id was already processed, making delivery idempotent while React stays fast and optimistic. Testing this doesn't require heavy end-to-end suites—checking that exactly one email arrives per eventId, that recipients match the final mention list, and that headers expose the same event id catches most real regressions.

The approach also improves traceability in CI and preview environments by isolating a mailbox per run and surfacing the eventId in logs and headers, so failures are legible instead of mysterious. The pattern isn't React-specific; any client capable of resubmitting a notification intent through optimistic rendering or retries can hit the same bug class, making this a broadly reusable discipline for notification systems.