creating a cancelable promises

useCancellablePromises.js

/**
 * creating a cancelable promises allows you to ensure that callbacks will only be executed 
 * if the context is still appropriate for it.
 * https://medium.com/trabe/avoid-updates-on-unmounted-react-components-2fbadab17ad2
 * 
 * useEffect(() => {
 *  const api = useCancellablePromises();
 *  const fetchDataCancellablePromise = fetchData();
 *  api.appendPendingPromise(fetchDataCancellablePromise);
 *  
 *  fetchDataCancellablePromise.promise
 *    .then(() => {});
 *     
 *  return () => {
 *    api.removePendingPromise(fetchDataCancellablePromise);
 *  }
 * }
 */
const useCancellablePromises = () => {
  const pendingPromises = useRef([]);

  const appendPendingPromise = (promise: Promise<any>) =>
    pendingPromises.current = [...pendingPromises.current, promise];

  const removePendingPromise = (promise: Promise<any>) =>
    pendingPromises.current = pendingPromises.current.filter(p => p !== promise);

  const clearPendingPromises = () => pendingPromises.current.map(p => p.cancel());

  const api = {
    appendPendingPromise,
    removePendingPromise,
    clearPendingPromises,
  };

  return api;
};