import React, {
useState,
useEffect,
useDebugValue
} from
'react'
;
function
useFetch(url) {
const [data, setData] = useState(
null
);
const [loading, setLoading] = useState(
true
);
useEffect(() => {
async
function
fetchData() {
try
{
const response = await fetch(url);
const result = await response.json();
setData(result);
setLoading(
false
);
}
catch
(error) {
console.error(
'Error fetching data:'
, error);
setLoading(
false
);
}
}
fetchData();
}, [url]);
useDebugValue(url);
return
{ data, loading };
}
function
MyComponent() {
const { data, loading } =
if
(loading) {
return
<div>Loading...</div>;
}
return
(
<div>
{
data ?
(<div>Data: {JSON.stringify(data)}</div>) :
(<div>No data available</div>)
}
</div>
);
}
export
default
MyComponent;