/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 vote251 views1 answer
React render html variable
Javascript React
0 vote268 views1 answer
How to change grid size with conditional expression in react
Javascript React
1 vote270 views1 answer
React native get current time
Javascript React
0 vote246 views1 answer
Add React Router to React Redux CRUD App
Javascript React
-1 vote258 views4 answers
React native reset cache
Javascript React
11 votes256 views4 answers
Eslint disable react
Javascript React
0 vote251 views1 answer
Show and Hide element in react
Javascript React
24 votes231 views6 answers
React native navigation
Javascript React
12 votes278 views3 answers
Get value of input react
Javascript React
66 votes240 views6 answers
Routing react
Javascript React