abort-controller.js

function useAbortController() {
  const abortControllerRef = React.useRef()
  const getAbortController = React.useCallback(() => {
    if (!abortControllerRef.current) {
      abortControllerRef.current = new AbortController()
    }
    return abortControllerRef.current
  }, [])

  React.useEffect(() => {
    return () => getAbortController().abort()
  }, [getAbortController])

  const getSignal = React.useCallback(() => getAbortController().signal, [
    getAbortController,
  ])

  return getSignal
}

Solid 👍👍

Hello folks, could someone kindly show me how this works in practise?

I'm currently doing this with a ref, this looks more elegant though

Whoever found above gist first before Kent's own tweet, use the above hook like below. Directly copied from that tweet.

const getSignal = useAbortController()

// in an effect
fetch('/thing', {signal: getSignal()})

I use it this way, but it raises error: Failed to execute 'fetch' on 'Window': The user aborted a request.

  const getSignal = useAbortController();
  const [data, setData] = useState();

  const doFetch = async () => {
    const signal = getSignal();
    const response = await fetch("https://codesandbox.io", { signal });
    const result = await response.body;

    setData(result);
  };

  useEffect(() => {
    doFetch()
  }, []);

How to solve?

How do you manually call abort() from this?

Here is my manually controlled abortController I use to allow users to cancel an upload in React Native

function useAbortController() {
  const abortControllerRef = useRef();
  const getAbortController = useCallback(() => {
    console.log('getAbortController', abortControllerRef.current);
    if (!abortControllerRef.current) {
      abortControllerRef.current = new AbortController();
    }
    return abortControllerRef.current;
  }, []);

  const abortSignal = useCallback(() => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
 
      abortControllerRef.current = null;      // Resets it for next time
    }
  }, []);

  const getSignal = useCallback(
    () => getAbortController().signal,
    [getAbortController]
  );

  return { getSignal, abortSignal };
}

Inspired by @charlestbell

• Leave control to the user of the hook to abort() anytime they want, not just on unmount.
• Returns a (memoized) object that resembles the AbortController API: { abort, signal } instead of the getSignal function.
• Strict null checks on abortCtrlRef.current instead of falsey for perf (just because).

function useAbortController() {

  const abortCtrlRef = useRef( null );

  const getAbortController = useCallback(
    () => {
      if ( abortCtrlRef.current === null ) abortCtrlRef.current = new AbortController();
      return abortCtrlRef.current;
    },
    []
  );

  const abort = useCallback(
    () => {
      if ( abortCtrlRef.current !== null ) {
        abortCtrlRef.current.abort();
        abortCtrlRef.current = null;
      }
    },
    []
  );

  return useMemo(
    () => ({
      get signal() { return getAbortController().signal; },
      abort,
    }),
    [ getAbortController, abort ]
  );

}

Usage:

function MyComponent( props ) {

  // { abort, signal } just like a real AbortController
  const { abort, signal } = useAbortController();

  // Some useEffect or other thing you need to be able to abort
  useEffect(() => fetch( url, { signal } ), [ signal ]);

  // The user of the hook can abort whenever they please.
  useEffect(() => () => abort(), [ abort ]);

}

@rejhgadellaa that code has get signal() { return getAbortController().signal; } and then
const { abort, signal } = useAbortController();

I think it will call getter right away, why not just

const useAbortController = () => {
    const controllerRef = useRef<AbortController | null>(null);
    if (controllerRef.current === null) {
        controllerRef.current = new AbortController();
    }

    return {
        abort: controllerRef.current.abort,
        signal: controllerRef.current.signal,
    };
};

in versions above controller is created only when fetch is issued,
for example if there is some button that issues a request, we do not need abortController until it is pressed

Hmm good point, I may have overdone it with the get signal() { ... } haha