🔄 Component Lifecycle and Effects

The Component Lifecycle

Every component passes through three phases. Understanding them tells you when your code runs relative to the screen updating.

• Mount — the component is created and inserted into the page for the first time.
• Update — its props or state change, so it re-renders (this can happen many times).
• Unmount — it is removed from the page, and any resources it set up must be released.

Class components used to expose named methods for these moments — componentDidMount, componentDidUpdate, componentWillUnmount. Function components unify all three into one hook: useEffect. Rather than thinking "run this on mount," the modern mindset is "keep this effect synchronized with these values."

What Is a Side Effect?

Rendering should be pure: given the same props and state, a component should return the same JSX and touch nothing else. A side effect is any operation that reaches outside that pure calculation. Common examples:

• Fetching data from an API
• Setting up subscriptions or event listeners
• Starting timers (setTimeout, setInterval)
• Reading or writing browser APIs (localStorage, geolocation, the document title)
• Manually interacting with a non-React widget

💡 The restaurant analogy: Your visit's main purpose is to eat (render the UI). But to make that happen you place an order (a side effect) — an action directed outside your table. And when you leave, you settle the bill (cleanup). Effects are the orders your component places with the outside world.

Side effects don't belong in the render body because renders can happen often and at unpredictable times. useEffect gives them a controlled home that runs after the screen updates.

The useEffect Hook

useEffect takes two arguments: a function containing your effect, and an optional dependency array that controls when it runs. The effect can optionally return a cleanup function.

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Effect: runs after the render is painted to the screen
    console.log('synced');

    // Optional cleanup: runs before the next effect and on unmount
    return () => {
      console.log('cleaning up');
    };
  }, [/* dependencies */]);

  return <div>Hello</div>;
}

Crucially, effects run after React has committed the render and the browser has painted. That ordering keeps the UI responsive — your effect never blocks the screen from updating.

The Dependency Array

The second argument is the control dial for how often your effect runs. There are exactly three cases:

React compares each dependency to its previous value with Object.is and re-runs the effect only if one changed. The golden rule: every value from component scope that the effect uses must appear in the array. Leaving one out causes the effect to read a stale value.

function ProductList({ category, sortBy, page }) {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    // Re-runs whenever any of the three inputs change
    fetchProducts(category, sortBy, page).then(setProducts);
  }, [category, sortBy, page]);

  return products.map(p => <ProductCard key={p.id} product={p} />);
}

Cleanup Functions

If your effect sets up something ongoing — an event listener, a timer, a subscription — you must tear it down. Return a cleanup function from the effect. React runs it before the effect runs again, and once more when the component unmounts.

function WindowSize() {
  const [size, setSize] = useState({ w: window.innerWidth, h: window.innerHeight });

  useEffect(() => {
    const handleResize = () =>
      setSize({ w: window.innerWidth, h: window.innerHeight });

    window.addEventListener('resize', handleResize);

    // Cleanup: remove the listener so it doesn't pile up or fire after unmount
    return () => window.removeEventListener('resize', handleResize);
  }, []); // set up once, tear down on unmount

  return <p>{size.w} × {size.h}</p>;
}

💡 The subscription analogy: Subscribing to a newspaper when you move into an apartment means cancelling it when you move out. Cleanup is telling the delivery to stop — without it, papers keep arriving at an address no one lives at, wasting resources and causing errors.

Common things to clean up: event listeners (removeEventListener), timers (clearTimeout/clearInterval), WebSocket or observable subscriptions, and in-flight requests. The stale closure trap makes cleanup especially important with timers:

function Ticker() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      // Functional update avoids capturing a stale `count`
      setCount(prev => prev + 1);
    }, 1000);

    return () => clearInterval(id); // stop the interval on unmount
  }, []); // empty deps is fine because we used the functional update

  return <p>{count}</p>;
}

Data Fetching & Race Conditions

Fetching in an effect is a classic use case — but it hides a subtle bug. If a dependency changes quickly (say the user switches profiles), an earlier request can resolve after a later one, overwriting fresh data with stale data. This is a race condition. The fix is a cleanup flag (or an AbortController) that ignores results from a superseded effect.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let ignore = false; // becomes true when this effect is superseded
    const controller = new AbortController();

    async function load() {
      try {
        setLoading(true);
        const res = await fetch(`/api/users/${userId}`, { signal: controller.signal });
        if (!res.ok) throw new Error('Failed to load user');
        const data = await res.json();
        if (!ignore) setUser(data);          // only the latest effect wins
      } catch (err) {
        if (!ignore && err.name !== 'AbortError') setError(err.message);
      } finally {
        if (!ignore) setLoading(false);
      }
    }

    load();

    return () => {
      ignore = true;        // ignore this request's result
      controller.abort();   // and cancel it if still in flight
    };
  }, [userId]); // re-fetch whenever userId changes

  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error}</p>;
  return <h2>{user.name}</h2>;
}

Hands-on Exercise

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return; // paused: no interval, nothing to clean up

    const id = setInterval(() => {
      setSeconds(prev => prev + 1); // functional update — no stale count
    }, 1000);

    return () => clearInterval(id); // runs on pause and on unmount
  }, [running]);

  return (
    <div>
      <p>{seconds}s</p>
      <button onClick={() => setRunning(r => !r)}>
        {running ? 'Pause' : 'Start'}
      </button>
      <button onClick={() => { setRunning(false); setSeconds(0); }}>
        Reset
      </button>
    </div>
  );
}

Common Mistakes

Summary & Quiz

📚 Further Reading

• React Docs — useEffect Reference
• React Docs — Synchronizing with Effects
• React Docs — You Might Not Need an Effect

🚀 What's Next?

Your components can now remember data and synchronize with the outside world. Next we focus on how users drive them: React's Event Handling System — synthetic events, passing arguments to handlers, and the patterns that keep interactive UIs clean.