Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Async/await implementation of the useFetch hook
import { useEffect, useState } from "react";
const useFetchAsync = (initialUrl, options) => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [url, setUrl] = useState(initialUrl || "")
useEffect(() => {
if(!url) return
const fetchData = async () => {
setLoading(true)
try {
const response = await fetch(url, options)
if (!response.ok) {
throw new Error(`HTTP error status: ${response.status}`);
}
const json = await response.json()
setData(json)
setLoading(false)
setError(null)
} catch (error) {
//This catches the error if either of the promises fails or the manual error is thrown
setLoading(false)
setError(error.message)
}
}
fetchData()
}, [url, options]);
return [{ data, loading, error }, setUrl];
}
export default useFetchAsync;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment