xhrHooks.ts

import { useCallback, useEffect, useRef } from 'react';
import axios, { Canceler } from 'axios';

export const useCancelTokens = () => {
  const cancelTokens = useRef<Canceler[]>([]);
  
  // Add a cancel token in this hooks and return a generated token
  const addCancelToken = useCallback(() => {
    const { cancel, token } = axios.CancelToken.source();
    
    cancelTokens.current.push(cancel);
    return token;
  }, []);
  
  // Cancel all requests
  const cancelAll = useCallback(() => {
    cancelTokens.current.forEach((canceler) => canceler());
  });
  
  useEffect(() => {
    // Cancel all requests on unmount cycle
    return () => {
      cancelAll();
    };
  }, []);
  
  return {
    cancelTokens,
    addCancelToken,
    cancelAll,
  };
}