UseAbortController

1'use client';
2 
3import { useCallback, useEffect, useRef } from 'react';
4 
5interface UseAbortControllerOptions {
6  abortOnUnmount?: boolean;
7}
8 
9interface UseAbortControllerReturn {
10  controller: AbortController;
11  signal: AbortSignal;
12  aborted: boolean;
13  abort: (reason?: string) => void;
14  reset: () => void;
15  fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
16}
17 
18export function useAbortController(
19  options: UseAbortControllerOptions = {},
20): UseAbortControllerReturn {
21  const { abortOnUnmount = true } = options;
22 
23  const controllerRef = useRef<AbortController>(new AbortController());
24 
25  const abort = useCallback((reason?: string) => {
26    if (!controllerRef.current.signal.aborted) {
27      controllerRef.current.abort(reason);
28    }
29  }, []);
30 
31  const reset = useCallback(() => {
32    if (!controllerRef.current.signal.aborted) {
33      controllerRef.current.abort('Reset');
34    }
35    controllerRef.current = new AbortController();
36  }, []);
37 
38  const abortableFetch = useCallback(
39    (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
40      return fetch(input, {
41        ...init,
42        signal: controllerRef.current.signal,
43      });
44    },
45    [],
46  );
47 
48  // Abort on unmount if option is enabled
49  useEffect(() => {
50    const currentController = controllerRef.current;
51 
52    return () => {
53      if (abortOnUnmount && !currentController.signal.aborted) {
54        currentController.abort('Component unmounted');
55      }
56    };
57  }, [abortOnUnmount]);
58 
59  return {
60    controller: controllerRef.current,
61    signal: controllerRef.current.signal,
62    aborted: controllerRef.current.signal.aborted,
63    abort,
64    reset,
65    fetch: abortableFetch,
66  };
67}