/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

1 vote352 views1 answer
How to use react memo hooks
Javascript React
1 vote358 views5 answers
Push notification react native
Javascript React
0 vote367 views1 answer
Reactjs clic copy
Javascript React
0 vote325 views1 answer
React native npm run start port
Javascript React
35 votes370 views6 answers
Create react app with tailwind
Javascript React
1 vote355 views2 answers
How to render react native app under the status bar
Javascript React
1 vote342 views1 answer
How to pass function as a props in react in functional components
Javascript React
23 votes351 views4 answers
Change port react app
Javascript React
17 votes351 views5 answers
React native icons
Javascript React
112 votes409 views5 answers
Command to create react app
Javascript React