CoreIntermediate45 min read
3. Effects & fetching
React Basics · 16 pages source format
useEffect for syncing with the outside world — carefully.
What you'll learn
- useEffect
- Dependency arrays
- Cleanup
Key idea
Effects run after paint to talk to APIs, subscriptions, or the DOM. Dependency arrays decide when they re-run.
Quick check
Empty dependency array means…
Do this now
Write 3 notes on: Effects.
Clear?
Practice
Fetch a public JSON API into state and render a list.
useEffect(() => {
let on = true
fetch(url).then(r => r.json()).then(d => { if (on) setData(d) })
return () => { on = false }
}, [url])Do this now
Commit one file practicing Effects.
Clear?