Components render. Effects do things after rendering.
Direct answer
useEffect(fn, deps) runs fn after rendering. The dependency array controls when it re-runs: [] once, [value] when value changes and no array on every render. Return a function to clean up timers or subscriptions.
Fetching data
import { useEffect, useState } from "react";
function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
let cancelled = false;
async function load() {
const res = await fetch("https://jsonplaceholder.typicode.com/users");
const data = await res.json();
if (!cancelled) setUsers(data);
}
load();
return () => { cancelled = true; };
}, []);
return null;
}
Timers with cleanup
useEffect(() => {
const id = setInterval(() => console.log("tick"), 1000);
return () => clearInterval(id);
}, []);
Common mistakes
- Missing dependencies.
- Updating state inside an effect that depends on it.
- Forgetting cleanup.
Where Teyro fits
Teyro's React Native for Beginners course turns this into short lessons you can play in a few minutes a day. It has 80 lessons, and you can start free.
The bottom line
Effects are for syncing with the outside world. Keep dependencies honest.
