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
}

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 };
}

Typescript useAbortController.ts

import React from "react"

export function useAbortController() {
  const abortControllerRef = React.useRef<AbortController | undefined>()

  const getAbortController = React.useCallback(() => {
    abortControllerRef.current =
      abortControllerRef.current && !abortControllerRef.current.signal.aborted
        ? abortControllerRef.current
        : new AbortController()
    return abortControllerRef.current
  }, [])

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

  React.useEffect(() => {
    return () => {
      getAbortController().abort("Re-render")
    }
  }, [getAbortController])

  return getSignal
}