React useRef for Duplicate Prevention Race Conditions

Problem

When implementing duplicate detection, spam prevention, or rate limiting in React using state, rapid successive function calls can bypass the checks due to React's asynchronous state updates. All calls read the same stale state value before any setState completes, allowing duplicates through.

Common Scenario: Alert/notification system where rapid form validation errors trigger multiple identical alerts despite duplicate detection logic.

Context / Trigger Conditions

Use this pattern when you encounter:

1. Duplicate Detection Failures:
   • Multiple identical alerts/notifications appear despite deduplication logic
   • Spam prevention allows duplicates when triggered rapidly
   • List deduplication fails for items added in quick succession