useFetch.js

import {useEffect, useState} from "preact/hooks";

export const useFetch = (
	{
		url, // request url
		parse = 'json', // default body parser
		placeholder = undefined, // when error|loading return this as data
		key = undefined, // to track different changes (latter to cache)
		...options // fetch() options like methods , ...
	} = {}
) => {
	const [state, setState] = useState({
		isError: false, isLoading: false, isReady: false,
		data: placeholder, error: undefined,
	});

	useEffect(() => {
		const controller = new AbortController(); // use to cancel previous requests
		const opts = Object.assign({signal: controller.signal}, options); // U can change default signal to whatever you want
		fetch(url, opts)
			.then(async response => {
				const data =
					parse === 'json' ? await response.json() :
						parse === 'text' ? await response.text() :
							parse === 'arrayBuffer' ? await response.arrayBuffer() :
								parse === 'blob' ? await response.blob() :
									parse === 'formData' ? await response.formData() :
										response;
				setState({
					isError: false, isLoading: false, isReady: true,
					data, error: undefined,
				});
			}).catch(err => {
			setState({
				isError: true, isLoading: false, isReady: false,
				data: placeholder, error: err,
			});
		});

		setState({
			isError: false, isLoading: true, isReady: false,
			data: placeholder, error: undefined,
		});

		return () => controller.abort(); // cancels fetch request on exit
	}, [url, parse, options, key]); // auto refresh on url|options|parse|key

	return state;
};