![function Component({ id }) {
// Or const [status, setStatus] = useState('loading');
const [isLoading, setIsLoading] = useState(true);
const [user, setUser] = useState();
const [error, setError] = useState();
useEffect(() => {
let ignore = false;
setIsLoading(true);
fetch(`/api/users/${id}`)
.then((res) => {
if (!res.ok) {
throw new Error('Failed to fetch');
}
return res.json();
})
.then((jsonData) => {
if (!ignore) {
setUser(jsonData);
setError(undefined);
}
})
.catch((err) => {
if (!ignore) {
setError(err);
setUser(undefined);
}
})
.finally(() => {
if (!ignore) {
setIsLoading(false);
}
});
return () => {
ignore = true;
};
}, [id]);
// ...
}](https://pbs.twimg.com/media/GTQTiKiXcAEkrHu.jpg?name=small&format=webp)
ALT function Component({ id }) { // Or const [status, setStatus] = useState('loading'); const [isLoading, setIsLoading] = useState(true); const [user, setUser] = useState(); const [error, setError] = useState(); useEffect(() => { let ignore = false; setIsLoading(true); fetch(`/api/users/${id}`) .then((res) => { if (!res.ok) { throw new Error('Failed to fetch'); } return res.json(); }) .then((jsonData) => { if (!ignore) { setUser(jsonData); setError(undefined); } }) .catch((err) => { if (!ignore) { setError(err); setUser(undefined); } }) .finally(() => { if (!ignore) { setIsLoading(false); } }); return () => { ignore = true; }; }, [id]); // ... }





















