Fetch client-side data in an effect with cleanup guard.
Section: Effect Hooks
Fetch inside an effect
tsx
tsx
useEffect(() => {
let ignore = false;
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(data => { if (!ignore) setUser(data); });
return () => { ignore = true; };
}, [userId]);Explanation
Guard against race conditions when multiple requests can finish out of order.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Effect Hooks
useLayoutEffect before paint
Run a layout-sensitive effect before the browser paints.
useEffectEvent for non-reactive effect logic
Read latest values in an effect event without re-triggering the effect.