useCancelToken.tsx

import * as React from "react";
import axios, { CancelTokenSource } from "axios";

export default function useCancelToken(
  identity?: any,
): {
  current: CancelTokenSource;
  cancelAndRenewal(): void;
} {
  const cancelTokenSource: React.MutableRefObject<
    CancelTokenSource | undefined
  > = React.useRef(undefined);

  const cancelAndRenewal = React.useCallback(() => {
    if (cancelTokenSource.current) {
      cancelTokenSource.current.cancel();
      cancelTokenSource.current = axios.CancelToken.source();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cancelTokenSource.current]);

  if (!cancelTokenSource.current) {
    cancelTokenSource.current = axios.CancelToken.source();
  }

  React.useEffect(
    () => () => {
      if (cancelTokenSource.current) {
        // cancelTokenSource.current.cancel();
        cancelTokenSource.current = axios.CancelToken.source();
      }
    },
    [identity],
  );

  return {
    current: cancelTokenSource.current,
    cancelAndRenewal,
  };
}