AbortController review

[franciscop-sc]

Hi, it's me again :)

I just wanted to stop by to say I've been trying a new API, and I think use-async-effect could consider supporting the AbortController API. It seemed an opaque API for me before, but after experimenting a bit it seems like a very similar example to the useRef() API:

var controller = new AbortController();
var signal = controller.signal;
console.log(signal);
// { aborted: false, onabort: null }

document.querySelector('body').addEventListener('click', e => {
  console.log(signal);
  // { aborted: false, onabort: null }
  controller.abort();
  console.log(signal);
  // { aborted: true, onabort: null }
});

I am not sure how (if any) to use it, but I can see maybe providing it as a second parameter:

useAsyncEffect(async (isMounted, signal) => {
  try { 
    const res = await fetch(`/users/${id}`, { signal });
    const data = await res.json();
    if (!isMounted()) return;
    setUser(data);
  } catch (error) {
    console.error(error);
  }
}, []);

On the other hand, I think these are bad:

• Mixing try/catch with normal if checks for handling the lifecycle. It seems to be the way fetch() works, but it's very ugly.
• Signal has an onabort callback, which is very similar to the second callback in use-async-effect. Again, two different ways of doing almost the same.
• It can probably be done in user-land in a not-difficult way (going to attempt this soon). The main advantage of doing it this way is the availability of passing it straight into fetch(), which seems the most common case for use-async-effect.

[houfio]

Hey, sorry for the very late reply! This sounds like a great idea, but I'm not sure if we should implement it into the library itself. Have you already done some experimentation with your own implementation?

[dartess]

AbortController is proposed to be used in another implementation useAsyncEffect: https://github.com/n1ru4l/use-async-effect.

This implementation looks more concise. There is no need to use experimental API and generators.

[franciscop-sc]

BTW I ended up implementing this as part of a growing module I've published:

import { useAsyncEffect } from "use-async";

useAsyncEffect(async signal => {
  const res = await axios.get('/data', { signal });
  setProfile(res.data);
}, [id]);