Managing React useEffect for Dynamic Arrays with Cancellation of Previous Calls

hi, I have a problem and I can not find a solution.
In react, I have an array that can change, let's call it userInputs.
I must have a treatment on each input of the array but it can change depending on user interactions.

So I have a program that runs effect like this:

useEffect(()=>{
effectProgram(userInputs).pipe(E.runPromise)
},[userInputs])


my problem is that when userInputs changes, the program is run many times but I want to cancel the previous calls to effectProgram to keep only the last one as there is API calls done.
I tried to tackle the problem with Ref but when changing the ref but when changing the ref from another part of the program, it does not succeed.

Any idea on how to tackle this kind of problems?
Was this page helpful?