React useEffect Hook

Run side effects such as data fetching, subscriptions, and DOM syncing with useEffect.

What is an effect?

Effects run after React updates the DOM.

tsx

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Dependency array behavior

Dependency array	Behavior
omitted	runs after every render
`[]`	runs once after mount
`[a, b]`	runs when `a` or `b` changes

Data fetch example

tsx

useEffect(() => {
  let active = true;

  fetch('/api/users')
    .then(r => r.json())
    .then(data => { if (active) setUsers(data); })
    .catch(setError);

  return () => { active = false; };
}, []);

Common mistakes

Missing dependencies
Triggering infinite loops
Putting non-effect logic inside effect

Next, we will share values with useContext.