/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

0 vote181 views1 answer
Unexpected token useeffect react native
Javascript React
69 votes205 views6 answers
React route
Javascript React
4 votes181 views1 answer
Reactjs onclick open new page
Javascript React
0 vote207 views1 answer
React native layout animation android
Javascript React
0 vote200 views2 answers
Remove the warning for setState on unmounted components in React
Javascript React
3 votes182 views5 answers
./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'.
Javascript React
0 vote183 views1 answer
Installation de react native maps bibliothèque
Javascript React
0 vote198 views1 answer
Create react app node: internal/modules/cjs/loader:936throw err;^Error: Cannot find module 'react-scripts/scripts/init.js'
Javascript React
0 vote205 views1 answer
React-anime
Javascript React
11 votes177 views2 answers
How to add react icons using npm
Javascript React