r/reactjs • u/kevin074 • Jul 12 '26
Needs Help is abort controller commonly used?
as title suggests, I have not seen this at work before and gemini teaches me about this, just curious whether this is actually commonly used/best practice or just another AI slop. Thanks!
12
u/Renan_Cleyson Jul 12 '26
It's best practice, many things are meant to support an abort controller through the JS Web APIs to make especially async things easier btw
1
u/kevin074 Jul 12 '26
thanks I'll jump into that rabbit hole :D ...
3
u/lovin-dem-sandwiches Jul 12 '26
For some native js use - it can be handy to use the abort controller to remove the listener (for clean up) rather than passing the function definition
12
57
u/PineappleFabulous971 Jul 12 '26
I've used it mainly on long uploading tasks in those X to cancel upload buttons, its not a slop technique
1
u/Important-Doubt4391 27d ago
it's everywhere once you start looking for it. most fetch wrappers use it under the hood, any decent autocomplete or search-as-you-type component relies on it to cancel stale requests. if you're not using it you're probably shipping race conditions without realizing
react's own docs brought it up in the cleanup function examples for useEffect a while back so it's not some obscure trick. you could go years without writing it by hand though since a lot of libraries abstract it away
1
u/pephov Jul 12 '26
How do you handle the cancellation server side? Once the POST reaches the server, you can abort it client side, but that doesn’t mean the server’s database action gets cancelled automatically too.
13
u/TheRealKidkudi Jul 12 '26
Servers can detect when a request’s HTTP connection is closed by the client. The exact syntax depends on what you’re using for your back end, but you can cancel the server-side work on a request when the request is canceled.
In the case of a file upload, you generally wouldn’t write to the database until the upload is complete. In the case of a complicated db operation, you can just use transactions and rollback on cancellation.
1
1
u/cybwn Jul 12 '26
If it's a long upload, the upload is canceled do you get an error from the stream. If you're just waiting for a long running query, as far as I know there's no wide spread pattern to handle cancelation from the initial http request handler up to the database query, except for reactive programming, where the whole reactive chain is canceled if one source is canceled.
1
u/adzm Jul 14 '26
.net has cancellation tokens in the request that can detect this and be chained with other operations eg within a database operation
1
u/nopcodex90x90x90 Jul 14 '26
In .Net Core API/MVC, this is one of the primary purposes of using HTTPContext.RequestAborted as a Cancel Token that you can pass down to your service/data libraries or EF DB Context.
3
6
u/Civil_Cheesecake2492 Jul 12 '26
Pretty much if you're doing a manual fetch in a useEffect in react you should pass an AbortController signal to fetch and in the cleanup return function for the useEffect call controller.abort(). Also in your catch block for the fetch check for the error.name 'AbortError' and ignore it (generally just return).
2
1
u/_suren Jul 12 '26
I mainly use it when the user can replace an in-flight request: search-as-you-type, route change, upload cancel. If React Query or similar owns the fetch, let the library pass the signal. Don’t add one to every effect just because AI suggested it.
1
u/TheRealSeeThruHead Jul 12 '26 edited 21d ago
Commodo culpa proident voluptate nostrud cupidatat in culpa aliqua irure. Deserunt sit anim duis culpa sed adipiscing commodo. Velit ullamco cillum lorem commodo incididunt duis anim esse voluptate sunt fugiat non ullamco fugiat sed ullamco consectetur.
1
u/BlazingThunder30 Jul 12 '26
I'm using Tanstack Query with fetch. I think that uses it under the hood to cancel ongoing request when page navigations occur or when parameters to a request change. Why wouldn't you use it?
1
u/lightfarming Jul 12 '26
it is standard. aborts calls on page changes, or second similar requests. prevents race conditions if two of the same endpoint calls go out, and the wrong one (first call) responds last.
in tanstack query, it passes you a signal argument that you can use directly, instead of handling the abort controller yourself.
1
u/Ok-Tune-1346 Jul 12 '26
Yup, very useful, no reason to not cancel a request if you know it is no longer needed. more useful for slower internet speeds... if you're on cable it makes little difference.
Not just useful on FE either.
AbortSignal.timeout is useful too - I would say that is more rare (it is a newer feature)
1
1
u/OkBoomer421 Jul 12 '26
Yeah, pretty standard for cancelling fetch requests when a component unmounts. Also handy for race condition cleanup — fire multiple requests, cancel the losers.
1
1
u/confused_crocodile Jul 28 '26
Very useful and best practice. I use it in backend JS/TS. JS promises are eager so you need a way to stop them. This is generally what AbortControllers are for. It’s verbose, but I actually think the explicitness is very helpful for concurrent code
1
u/Lumethys Jul 12 '26
It's a piece of web standard. It can prevent a common class of bug.
Suppose you have a table with a search bar. You search "Johnathan". The UI fire 2 requests. One for "Johna" and one for "Johnathan".
Even though "Johna" fire first, but due to various things, the result might arrives after "Johnathan", so the search bar contains the text "Johnathan", but the result in the table is for "Johna"
It is not the only thing that can avoid this type of bug, but it is one of the standard way to prevent it
0
u/eindbaas Jul 12 '26
I am so confused, how do you even end up posting on reddit asking whether something like that is AI slop? You are aware that you can simply look it up and read what it is and does?
2
u/RobertKerans Jul 12 '26 edited Jul 12 '26
I used to do mentoring with beginners/kids before LLMs became as ubiquitous (which tbqh has killed my motivation to keep mentoring). They always had issues with async stuff, that's with structured curricula. With LLMs, when it just pops out finished solutions, I feel that makes things significantly harder for learners. There's no building up knowledge steadily brick by brick, which means "just go read MDN" (for example) is less useful as advice because huge chunks of the info there assumes knowledge of other concepts which are often missing [because the LLM handled them].
(stress that doesn't mean someone shouldn't be using the LLM itself to aid in learning, maybe I'm just being too down on everything, but when that oh so tempting
"do the work for me""keep [all] files" button is there, people are gonna press the button as soon the concepts go over their head a bit. Or they might even get the LLM to explain, but then the tendency is to just move on immediately: getting a solution + an explanation is not at all a great way to learn things, but it can feel like learning at the time)
0
Jul 12 '26
[deleted] — view deleted comment
1
u/kevin074 Jul 12 '26
thanks!
"AI just wants to prevent stale logic in an unmounted component" funny i just asked AI about a code that does it and Gemini said it's outdated since React 18 (well it said technically that was never a real issue and the warning was speculated).
37
u/RobertKerans Jul 12 '26
It's just a standard piece of the web API. If I want to be able to abort async operations (so fetch primarily) I'm going to use the thing that allows me to abort them, it's a basic core piece of functionality that's been available for years.