/Javascript/React/UseFetch custom hook for React

UseFetch custom hook for React

import { useEffect, useState } from 'react';

const useFetch = (url) => {
	const [data, setData] = useState(null);
	const [isLoading, setIsLoading] = useState(true);
	const [error, setError] = useState(null);

	useEffect(() => {
		const abortCont = new AbortController();

		fetch(url, { signal: abortCont.signal })
			.then((res) => {
				if (!res.ok) {
					throw Error('Could not fetch the data for that resource');
				}
				return res.json();
			})
			.then((data) => {
				setData(data);
				setIsLoading(false);
				setError(null);
			})
			.catch((err) => {
				if (err.name === 'AbortError') {
					console.log('Fetch aborted');
				} else {
					setError(err.message);
					setIsLoading(false);
				}
			});
		return () => abortCont.abort();
	}, [url]);
	return { data, isLoading, error };
};

Similar codes

2 votes340 views1 answer
React promises
Javascript React
3 votes298 views1 answer
Css in a react file
Javascript React
0 vote339 views1 answer
React native generate app hash without play console
Javascript React
0 vote316 views1 answer
Evaluating '_reactNativeImageCropPicker.default.openCamera
Javascript React
4 votes303 views1 answer
Import all images from folder reactjs
Javascript React
0 vote301 views1 answer
Google pay payment gateway for react js project
Javascript React
2 votes354 views1 answer
Dynamic import in reactjs
Javascript React
0 vote352 views1 answer
How to accept only. proper email from an input field react with functional component
Javascript React
48 votes334 views4 answers
How to add comment in react js
Javascript React
1 vote344 views1 answer
Npm react redux logger
Javascript React