React hook for async callback that automatically aborts on component unmount.

useAbortableAsyncCallback.js

export default function useAbortableAsyncCallback(callback, inputs) {

  const abortHandleRef = useRef();

  const runAbortHandle = useCallback(() => {
    if (abortHandleRef.current) {
      abortHandleRef.current();
    }
  }, []);

  const asyncCallback = useCallback(callback, inputs);

  const abortableAsyncCallback = useCallback((...args) => {
    runAbortHandle();
    const abortPromise = new Promise((resolve) => {
      abortHandleRef.current = resolve;
    });

    const promise = asyncCallback(...args);
    Promise.race([promise, abortPromise]);

    return promise;
  }, [asyncCallback]);

  useEffect(() => {
    return () => {
      runAbortHandle();
    }
  }, []);

  return abortableAsyncCallback;
}

Interesting use of an abort that doesn't rely on abort controller, thanks for sharing