Prevent duplicate requests in Rails API + React SPA

Question

I have a Rails 4.2 API and a React SPA which makes requests to it.

There are times when a chunk of duplicate requests are made to the backend, I think it might have something to do with the time its taking for the request to go through and it leads to the same transaction being processed multiple times.

In the most recent instance, the exact same request was sent 10 times with the exact same timestamp. Is there a way I can prevent duplicate requests from being processed? I am not sure how to even figure out the reason for this issue.

Another weird thing which happened in the same flow is that the following line:

Delayed::Job.find(proposed_job_id).destroy! if Delayed::Job.exists?(proposed_job_id)

raised an ActiveRecord::RecordNotFound which shouldn't ever happen since I have an if condition which first checks if the record exists.

I would appreciate any pointer or help on how to debug this issue

It might be that the request is being sent when the component mounts or renders, and somehow your component is being rendered or mounted multiple times. — Jumper
Client-side, you can try to debounce requests if they're made in relation to some events, like input... — 0xc14m1z
@Jumper the request is sent on clicking a button in an already mounted component so I am assuming that's not the case — anonn023432
@0xc14m1z would you mind giving a bit more information on how I can do this if the request is being made when the client clicks a button? — anonn023432