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
}

Ia had same implementation in typescript. Only difference if that I'm aborting with reason. I mostly use this in cases when I need to stop a flow on re-render.

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
}