How Moving Email Logic to the Backend Prevents Duplicate Sends in React Apps

A common pitfall in React approval workflows is triggering transactional emails via useEffect, which can fire multiple times during component remounts, data rehydration, or state syncs. Developer advocates separating user intent from rendering side effects by treating approvals as explicit server-side commands rather than UI-driven triggers. The recommended pattern has the client send a POST request with a unique idempotency key, while the server checks whether that key has already been processed before recording the approval or queuing an email. Using a database transaction and an outbox pattern ensures the email is scheduled exactly once, even if the request is retried or replayed. This approach makes the frontend responsible only for interaction and feedback, while the backend owns delivery logic and acts as the authoritative source of truth.