React hook for sending fetch requests and cancelling them safely.

useCancellableAjax.js

import { useEffect, useRef } from 'react'

/*
Safely send and cancel one AJAX request at the time. If you need to send multiple requests at the same time, call this hook several times.

Usage:
const [cancelRef, doAjax] = useCancellableAjax()

Fetch data. Tip: use a setState function as callback.
doAjax(url, fetchOptions, dataCallback)

Cancel a AJAX request. Cancel function only exists if the request is active. Note: you do not need to call the cancel function if the component is unmounted, this hook will take care of that.
if( cancelRef.current ) { cancelRef.current() }
*/

export default function useCancellableAjax() {
	const cancelRef = useRef(null)

	useEffect(() => {
		return () => {
			// Cancels the request if component is unmounted
			if( cancelRef.current )
				cancelRef.current();
			};
	}, [])

	const ajaxFunction = (url, fetchOptions, saveData) => {
		const controller = new AbortController();

		// Cancel function
		cancelRef.current = () => {
			controller.abort()
			cancelRef.current = null
		}

		fetch(url, { ...fetchOptions, signal: controller.signal })
		.then(response => response.json())
		.then(data => {
			// Remove the cancel function when the request is complete
			cancelRef.current = null;
			saveData(data)
		})
		.catch(error => {
			// Cancel is expected behavior, should not throw
			if( error.name !== 'AbortError' ) {
				throw error;
			}
		})
	}


	return [cancelRef, ajaxFunction]
}