React - Old promise overwrites new result

Question

I have a problem and I'm pretty sure I'm not the only one who ever had it... Although I tried to find a solution, I didin't really find something that fits my purpose.

I won't post much code, since its not really a code problem, but more a logic problem.

Imagine I have the following hook:

useEffect(() => {
    fetchFromApi(props.match.params.id);
}, [props.match.params.id]);

Imagine the result of fetchFromApi is displayed in a simple table in the UI.

Now lets say the user clicks on an entity in the navigation, so the ID prop in the browser URL changes and the effect triggers, leading to an API call. Lets say the call with this specific ID takes 5 seconds.

During this 5 seconds, the user again clicks on an element in the navigation, so the hook triggers again. This time, the API call only takes 0,1 seconds. The result is immediatly displayed.

But the first call is still running. Once its finished, it overwrites the current result, what leads to wrong data being displayed in the wrong navigation section.

Is there a easy way to solve this? I know I can't cancel promises by default, but I also know that there are ways to achieve it...

Also, it could be possible that fetchFromApi is not a single API call, but instead multiple calls to multiple endpoints, so the whole thing could become really tricky...

Thanks for any help.

Since you are making a call to the backend, I would disable the page and have a loading box display until the results are retrieved — FortyTwo, Feb 26 '19 at 12:46
@FortyTwo I'm already doing this... But that doesn't solve the problem that a promise resolves when its "invalid", since a newer one, who simply resolved faster is already displayed. — Twinfriends, Feb 26 '19 at 12:47
Are you using same data structure for storing data from both endpoints? — Umair Sarfraz, Feb 26 '19 at 12:48
@UmairSarfraz Its always the same endpoint, just another filter ID. — Twinfriends, Feb 26 '19 at 12:49
You can cancel fetch requests in new browsers https://stackoverflow.com/questions/31061838/how-do-i-cancel-an-http-fetch-request, otherwise you might have to use a XHR wrapper like `axios` — Dominic, Feb 26 '19 at 12:54
Have you tried [cleaning up after the effect](https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1)? — Yoshi, Feb 26 '19 at 13:18
Cancelling the API call is one thing, ignoring the result is another. And much simpler. — Bergi, Feb 26 '19 at 13:45

score 1 · Answer 1 · answered Feb 27 '19 at 06:20

The solution to this is extremely simple, you just have to determine whether the response that you got was from the latest API call or not and only then except it. You can do it by storing a triggerTime in ref. If the API call has been triggered another time, the ref will store a different value, however the closure variable will hold the same previously set value and it mean that another API call has been triggered after this and so we don't need to accept the current result.

const timer = useRef(null);
useEffect(() => {
    fetchFromApi(props.match.params.id, timer);
}, [props.match.params.id]);

function fetchFromApi(id, timer) {
     timer.current = Date.now();
     const triggerTime = timer.current;
     fetch('path').then(() => {
         if(timer.current == triggerTime) {
              // process result here
              // accept response and update state
         }
     })

}

Other ways to handle such scenarios to the cancel the previously pending API requests. IF you use Axios it provides you with cancelToken that you can use, and similarly you can cancel XMLHttpRequests too.

React - Old promise overwrites new result

1 Answers1