Automaticaly cancel Promise when component did unmount compatible with AbortController for fetch

useCancellablePromise.js

import { useEffect, useRef } from 'react';

export function PromiseCanceledError() {
  this.name = 'PromiseCanceledError';
}

const makeCancelable = (promise, abortController) => {
  let isCanceled = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise
      .then((val) => (isCanceled ? reject(new PromiseCanceledError()) : resolve(val)))
      .catch((error) => (isCanceled ? reject(new PromiseCanceledError()) : reject(error)));
  });

  return {
    promise: wrappedPromise,
    cancel() {
      isCanceled = true;
      if (abortController !== null) abortController.abort();
    },
  };
};

export default () => {
  const promises = useRef([]);

  useEffect(() => () => {
    promises.current.forEach((p) => p.cancel());
    promises.current = [];
  }, []);

  const cancellablePromise = (p, abortController = null) => {
    const cPromise = makeCancelable(p, abortController);
    promises.current.push(cPromise);
    return cPromise.promise;
  };

  return {
    cancellablePromise,
  };
};