♻️ Effects and Component Lifecycle

The Component Lifecycle

Every component moves through three phases. It is mounted (added to the screen for the first time), then possibly updated many times as its props or state change, and finally unmounted (removed from the screen).

Rendering itself must be pure: given the same props and state, a component returns the same JSX and touches nothing outside itself. But apps need to reach outside — call an API, add a scroll listener, start a countdown. Those interactions with the outside world are side effects, and they must happen after render, not during it.

If you've seen old React class components, effects replace the trio of lifecycle methods below. One hook now covers all three jobs:

Meet useEffect

useEffect takes two arguments: a setup function and an optional dependency array. React runs the setup function after the component renders and the DOM is painted.

import { useEffect } from 'react';

useEffect(() => {
  // setup: runs after render
  console.log('Component rendered');

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

The best mental model is synchronization, not lifecycle events. An effect keeps something outside React (a subscription, the document title, a network request) in sync with your component's current props and state. When the relevant state changes, React re-synchronizes by cleaning up the old effect and running a fresh one.

💡 A simple first effect. Updating the browser tab's title is a classic side effect — it touches document, which lives outside React:

function PageTitle({ unread }) {
  useEffect(() => {
    document.title = unread > 0 ? `(${unread}) Inbox` : 'Inbox';
  }, [unread]); // re-run only when the unread count changes

  return <h1>Inbox</h1>;
}

The Dependency Array

The second argument is the single most important part of useEffect. It tells React when to re-run the effect by listing the reactive values the effect depends on.

Cleanup Functions

If your effect sets something up that persists — an event listener, a timer, a WebSocket — you must tear it down. The function you return from the effect is the cleanup. React calls it before running the effect again and when the component unmounts.

Here's a component that tracks the window width. Without the cleanup, every time it remounts you'd stack another listener that never goes away:

import { useState, useEffect } from 'react';

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    // Cleanup: remove the exact listener we added.
    return () => window.removeEventListener('resize', handleResize);
  }, []); // set up once on mount, tear down on unmount

  return <p>Window width: {width}px</p>;
}

Data Fetching Done Right

Fetching in an effect is common, but naïve versions have a subtle bug: race conditions. If userId changes quickly, an older, slower request can resolve after a newer one and overwrite it with stale data. The fix is to cancel the previous request in the cleanup with an AbortController.

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [status, setStatus] = useState('loading'); // 'loading' | 'error' | 'ready'

  useEffect(() => {
    const controller = new AbortController();
    setStatus('loading');

    async function load() {
      try {
        const res = await fetch(`/api/users/${userId}`, {
          signal: controller.signal,
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        setUser(data);
        setStatus('ready');
      } catch (err) {
        // Ignore the "we cancelled it" error; surface real ones.
        if (err.name !== 'AbortError') setStatus('error');
      }
    }

    load();

    // Cleanup cancels the request if userId changes or we unmount.
    return () => controller.abort();
  }, [userId]);

  if (status === 'loading') return <p>Loading…</p>;
  if (status === 'error') return <p>Could not load user.</p>;
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

Three Classic Mistakes

1. Missing dependency → stale closure

Leaving a used value out of the array freezes it at the value from the render when the effect last ran.

// ❌ Wrong: reads userId but omits it — always uses the first userId.
useEffect(() => {
  fetchResults(query, userId).then(setResults);
}, [query]);

// ✅ Right: every value the effect reads is listed.
useEffect(() => {
  fetchResults(query, userId).then(setResults);
}, [query, userId]);

2. Updating a dependency inside the effect → infinite loop

If the effect sets state that it also depends on, it re-runs forever.

// ❌ Infinite loop: count changes → effect runs → count changes → …
useEffect(() => {
  setCount(count + 1);
}, [count]);

// ✅ If you truly need to react to something else, depend on THAT,
//    and use the updater form so you don't depend on count at all.
useEffect(() => {
  setCount((c) => c + 1);
}, [someTrigger]);

3. Object/array dependency → runs every render

React compares dependencies by reference. An object or array literal is a brand-new reference every render, so the effect never gets to skip.

// ❌ `options` is a new object each render → effect runs every time.
function Card({ user }) {
  const options = { showDetails: true };
  useEffect(() => {
    fetchDetails(user.id, options);
  }, [user.id, options]);
}

// ✅ Stabilize the reference with useMemo (or move it outside the component).
function Card({ user }) {
  const options = useMemo(() => ({ showDetails: true }), []);
  useEffect(() => {
    fetchDetails(user.id, options);
  }, [user.id, options]);
}

💡 Ask before reaching for an effect. Many things beginners put in effects don't belong there. Transforming data for rendering? Do it during render. Responding to a user click? Put it in the event handler. Effects are for synchronizing with external systems — if there's no external system, you probably don't need one.

Extracting Custom Hooks

When effect logic repeats across components, lift it into a custom hook — a function whose name starts with use and that calls other hooks. This is React's superpower for reusing stateful logic. Here's a reusable data-fetching hook built from the pattern above:

// useFetch.js
import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [status, setStatus] = useState('loading');

  useEffect(() => {
    const controller = new AbortController();
    setStatus('loading');

    fetch(url, { signal: controller.signal })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((json) => {
        setData(json);
        setStatus('ready');
      })
      .catch((err) => {
        if (err.name !== 'AbortError') setStatus('error');
      });

    return () => controller.abort();
  }, [url]);

  return { data, status };
}

Now any component fetches with a single readable line, and the tricky cleanup lives in exactly one place:

function Posts() {
  const { data: posts, status } = useFetch('/api/posts');

  if (status === 'loading') return <p>Loading…</p>;
  if (status === 'error') return <p>Failed to load.</p>;

  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

Hands-on Exercise

import { useState, useEffect } from 'react';

function LiveSearch() {
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');
  const [results, setResults] = useState([]);

  // Effect 1 — debounce the input.
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedQuery(query), 400);
    return () => clearTimeout(timer);
  }, [query]);

  // Effect 2 — fetch when the debounced value settles.
  useEffect(() => {
    if (!debouncedQuery) {
      setResults([]);
      return;
    }
    const controller = new AbortController();

    fetch(
      `https://jsonplaceholder.typicode.com/posts?q=${debouncedQuery}`,
      { signal: controller.signal }
    )
      .then((res) => res.json())
      .then(setResults)
      .catch((err) => {
        if (err.name !== 'AbortError') console.error(err);
      });

    return () => controller.abort();
  }, [debouncedQuery]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search posts…"
      />
      {!query && <p>Type to search…</p>}
      <ul>
        {results.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Summary & Quiz

📚 Further Reading

• React docs — Synchronizing with Effects
• React docs — You Might Not Need an Effect
• React reference — useEffect

🚀 What's Next?

You've now handled inputs and events in passing — next we go deep on Form Handling in React: controlled vs. uncontrolled components, validation strategies, and the modern libraries that make complex forms painless.