AbortController

Ryan Florence -

In Remix there is some seriously gnarly asynchronous features when it comes to data mutations and page transitions. When user interactions overlap with our async work, we have to abort multiple inflight requests.

With AbortController, we can cancel all of them at once!

let controller = new AbortController();
let { signal } = controller;

// pass same signal to two fetches
fetch(layout.dataUrl, { signal });
fetch(layout2.dataUrl, { signal });

// abort them both at the same time!
controller.abort();

This is perfect for us. With nested route layouts, one URL can map to multiple backend data loaders that make up the entire page. If the user clicks a link before the data has returned we can abort the fetches and save the browser some work. It's not going to parse or even wait for that response anymore.

You might not love the API but that's pretty dang useful.


Hi, I'm Ryan! I've been a webmaster since that was a thing. You might know me from React Router, Remix and Reach UI. You can follow me on Twitter, GitHub and YouTube.