![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]); // ... }























