1
ReactAdvanced#effects#debugging
ReactIntermediate#effects#data
How do you fetch data in a React component?
Fetch inside useEffect with an abort guard, or preferably use a data library such as TanStack Query for caching, retries and loading states. Never fetch during render.
Example
useEffect(() => {
const ac = new AbortController();
fetch('/api/users', { signal: ac.signal })
.then(r => r.json()).then(setUsers)
.catch(e => { if (e.name !== 'AbortError') setError(e); });
return () => ac.abort();
}, []);