React - using AbortController on every request as a custom hook

Question

I have a context provider in my app:

export const FormContext = createContext<IFormContext | null>(null);

function FormProvider({ caseNumber, children, ...props }: PropsWithChildren<IFormProviderContextProps>) {
    const {
        data: { caseNumber, taxDocuments, roles },
        api,
    } = useApiData();
    const [error, setError] = useState<string>(null);
    const [searchParams, setSearchParams] = useSearchParams();
    const activeStep = searchParams.get("step");

    const setActiveStep = useCallback((x: number) => {
        searchParams.delete("steg");
        setSearchParams([...searchParams.entries(), ["step", Object.keys(STEPS).find((k) => STEPS[k] === x)]]);
    }, []);

    useEffect(() => {
        const abortController = new AbortController();
        if (case) api.getPersons(case, abortController.signal).catch((error) => setError(error.message));
        return () => {
            abortController.abort();
        };
    }, [case]);

    useEffect(() => {
        const abortController = new AbortController();
        if (activeStep === Stepper.INCOME) {
            api.getTaxDocuments(abortController.signal).catch((error) => setError(error.message));
        }
        return () => {
            abortController.abort();
        };
    }, [activeStep]);

    useEffect(() => {
        const abortController = new AbortController();
            
        api.getCase(caseNumber, abortController.signal).catch((error) => setError(error.message));
        }
        return () => {
            abortController.abort();
        };
    }, []);

    return (
        <FormContex.Provider value={{ taxDocuments, case, roles, activeStep, setActiveStep, error, ...props }}>
            {children}
        </FormContex.Provider>
    );
}

I am using this FormProvider as a wrapper for my FormPage:

<React.StrictMode>
    <BrowserRouter>
        <Routes>
            <Route path="/:caseNumber" element={<FormWrapper />} />
            <Route path="/" element={<div>Hello world</div>} />
        </Routes>
    </BrowserRouter>
</React.StrictMode>

function FormWrapper() {
    const { caseNumber } = useParams<{ caseNumber?: string }>();
    return (
        <FormProvider caseNumber={caseNumber}>
            <FormPage />
        </FormProvider>
    );
}

In my FormPage I display components based on the activeStep that I get from FromProvider

export default function FormWrapper({ activeStep, ...props }: FormWrapperProps) {
    const renderForm = useMemo(() => {
        switch (activeStep) {
            case Stepper.TIMELINE:
                return <Timeline {...props} />;
            case Stepper.INCOME:
                return <Income {...props} />;
            case Stepper.RESIDENCY:
                return <Residency {...props} />;
            case Stepper.SUMMARY:
                return <Summary {...props} />;
            default:
                return <Timeline {...props} />;
        }
    }, [activeStep]);

    return <Suspense fallback={<Loader size="3xlarge" title="loading..." />}>{renderForm}</Suspense>;
}

What I would like to do is to implement an abort controller if component gets unmounted to stop the fetch request and state update. I have tried that with implementing it inside useEffect functions of the FormProvider. But, that is repetitive and would like to make some kind of function or a hook that would set the abort controller to every request. I am not sure how to do that with the current setup, where I have my api calls defined in useApiData() hook which looks like this:

export const useApiData = () => {
    const [case, setCase] = useState<CaseDto>(null);
    const [taxDocuments, setTaxDocuments] = useState<TaxDocumentsResponse[]>([]);
    const [roles, setRoles] = useState<IRoleUi[]>([]);

    const getCase = async (caseNumber: string, signal?: AbortSignal) => {
        const case = await CASE_API.case.findMetadataForCase(caseNumber, { signal });
        setCase(case.data);
    };

    const getPersons = async (case: CaseDto, signal?: AbortSignal) => {
        const personPromises = case.roles.map((role) =>
            PERSON_API.information.getPersonPost(
                { id: role.id },
                { signal }
            )
        );
        const [...persons] = await Promise.all([...personPromises]);
        const roles = persons.map((person) => {
            const role = case.roles.find((role) => role.id === person.data.id);
            if (!role) throw new Error(PERSON_NOT_FOUND);
            return { ...role, ...person.data };
        });

        setRoles(roles);
    };

    const getTaxDocuments = async (signal?: AbortSignal) => {
        const taxDocumentsDtoPromises = [getFullYear() - 1, getFullYear() - 2, getFullYear() - 3].map((year) =>
            TAX_API.integration.getTaxDocument(
                {
                    year: year.toString(),
                    filter: "",
                    personId: "123",
                },
                { signal }
            )
        );
        const [taxDocument1, taxDocument2, taxDocument3] = await Promise.all([...taxDocumentsDtoPromises]);
        setTaxDocuments([taxDocument1.data, taxDocument2.data, taxDocument3.data]);
    };




    const api = {
        getCase,
        getPersons,
        getTaxDocuments,
    };

    const data = {
        case,
        roles,
        taxDocuments,
    };

    return { data, api };
}

As I said I would like to be able to call api without having to define abort controller in every useEffect hook, but I am not sure how to achieve some like this for example:

apiWithAbortController.getCase(caseNumber).catch((error) => setError(error.message))}

I have tried with using a custom hook like this:

export const useAbortController = () => {
    const abortControllerRef = useRef<AbortController>();

    useEffect(() => {
        return () => abortControllerRef.current?.abort();
    }, []);

    const getSignal = useCallback(() => {
        if (!abortControllerRef.current) {
            abortControllerRef.current = new AbortController();
        }
        return abortControllerRef.current.signal;
    }, []);

    return getSignal;
};

That I was using like this in my useApiData:

const signalAbort = useAbortController();

const getCase = async (caseNumber: string) => {
    const case = await CASE_API.case.findMetadataForCase(caseNumber, { signal: signalAbort() });
    setCase(case.data);
};

But, that didn't work, with that setup none of the fetch calls were made.

Answer 1

There is no way to cancel all the network requests globallly at once. you have to attach an abort controller to each fetch calls.

import { useEffect } from 'react';

export const useAbortController = (fetcher,args,dependencies) => {
  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;
    // fetch here. write a reusable form based on your api function
    fetcher(...args,{signal})

    // you could also setTimeout and maybe after 2 seconds call abortController.abort()
      return () => abortController.abort();
  }, [...dependencies]);
};