Effects with useEffect

Every component so far in the React for Beginners series has been a pure function of its props and state: give it the same inputs, get the same UI. But real interfaces must synchronise with things outside React — set the page title, subscribe to a socket, start a timer, focus an input. The useEffect hook is React's tool for exactly that, and this chapter covers its dependency array, cleanup functions, and the discipline that keeps effects predictable.

What counts as an effect

An effect is code that reaches outside your component's render output to touch the browser or a network. Ask one question: does this need to happen because something changed, outside of React's control? If yes, it is an effect.

The right column is the trap beginners fall into: values you can calculate do not belong in state or effects at all — compute them while rendering.

Your first effect

The hook takes a callback — the effect — that runs after the component commits to the screen, not during render:

import { useEffect, useState } from 'react';

function DocumentTitle({ name }) {
  useEffect(() => {
    document.title = `${name} — Scriptly`;
  }, [name]);

  return <h1>{name}</h1>;
}

Expected output: the browser tab reads Ada — Scriptly, and changes to Ravi — Scriptly whenever the name prop changes. The render output itself never mentions the title — that is the division of labour.

The dependency array

The second argument is an array of every value the effect reads. React compares it after each render and re-runs the effect only when something differs:

Read [name] as: "this effect uses name, so re-run it when name changes." List every value you read — ESLint's react-hooks plugin will remind you, and honouring it prevents stale-data bugs.

Cleanup: the other half

Many effects reserve a resource that must be released — timers, listeners, subscriptions, in-flight requests. Return a cleanup function; React runs it before the next re-run and on unmount:

function LiveClock() {
  const [now, setNow] = useState(() => new Date());

  useEffect(() => {
    const timer = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(timer);        // runs on re-run and unmount
  }, []);

  return <time>{now.toLocaleTimeString()}</time>;
}

Expected output: the clock ticks once per second; when the component is removed, the interval is cleared — no orphan timer calling setState on an unmounted component. Think of setup and cleanup as a pair written together.

Effect flow, step by step

1. Component renders and React commits the UI to the DOM.
2. React compares the dependency array with the previous one.
3. If it changed (or this is the first render), React runs your effect.
4. Before running it again — or when the component unmounts — React runs the cleanup from the previous run.

In development with StrictMode, React deliberately mounts, cleans up and re-runs effects once to prove your cleanup is correct. If your effect is written as a proper pair, this changes nothing visible.

When NOT to use useEffect

• Deriving values — totals, filters and formatted strings are computed during render, not synchronised.
• Responding to user input — update state in the event handler, where the event actually happened.
• Fixing "extra" renders — effects do not make renders fewer; reach for memoisation only after measuring.

Common mistakes

• Missing dependencies — an effect that reads id but lists [] keeps showing data for the first id forever.
• No cleanup for listeners and timers — duplicates accumulate on every re-run; always pair setup with cleanup.
• Using effects for derivable data — storing a mirrored copy of state invites drift; compute the value instead.
• Calling setState with no guard on fetches — responses can arrive after unmount or out of order; cancel or ignore stale ones (chapter 13).
• Running effects during render — the callback runs after commit; anything synchronous belongs in the component body or an handler.

Practice checklist

1. Set the document title from a prop and watch it update when the prop changes.
2. Build the live clock; verify the interval stops by logging in the cleanup function.
3. Write an effect with [] and confirm it runs exactly once (twice in StrictMode dev).
4. Deliberately omit a dependency, observe the stale value, then add it and compare.
5. Audit one of your earlier components: replace any stored derived value with a calculation.

Effects make side effects safe — the most common side effect of all is loading remote data, covered next in Fetching Data from an API.