useEffect Hook

Introduction

Rendering a component and returning JSX is only part of what a real application needs to do. Sooner or later, you need to fetch data from a server, set up a timer, subscribe to an external event, or manually adjust something outside of React's rendering — these are all examples of side effects, and useEffect is the Hook designed specifically to handle them.

This lesson covers what a side effect actually is, the basic useEffect syntax, the crucial role of the dependency array in controlling when an effect re-runs, cleanup functions for anything that needs to be undone, and a very common bug: effects that accidentally cause infinite re-render loops.

What Is a Side Effect?

A side effect is anything a component does that reaches outside of the pure "take props and state, return JSX" process — talking to a server, reading or writing to localStorage, manually touching the DOM, starting a timer, or subscribing to an external data source. React's rendering itself should stay pure and predictable, so any of this "impure" work is moved into useEffect, which runs after React has updated the DOM.

Basic useEffect Syntax

useEffect takes a function (the effect itself) as its first argument. React runs that function after the render is committed to the screen, meaning the DOM has already been updated by the time your effect code runs.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me ({count})
    </button>
  );
}

You clicked 0 times   →  (after clicking)  →  You clicked 1 times

Here, no second argument was passed, so this effect runs after every single render — useful for demonstration, but rarely what you actually want in a real app, which is why the dependency array exists.

The Dependency Array

The optional second argument to useEffect is an array of dependencies. It tells React exactly when the effect needs to re-run, and controls one of three distinct behaviors.

useEffect(() => {
  console.log('Runs after EVERY render');
});

useEffect(() => {
  console.log('Runs ONCE, on mount only');
}, []);

useEffect(() => {
  console.log(`Runs on mount AND whenever userId changes`);
}, [userId]);

Cleanup Functions

Some side effects need to be undone before the component unmounts, or before the effect runs again — clearing a timer, removing an event listener, or closing a subscription. You do this by returning a function from inside your effect; React calls that returned function automatically at the right time.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // Cleanup: runs before the effect re-runs, and when the component unmounts
    return () => clearInterval(intervalId);
  }, []);

  return <p>Elapsed: {seconds}s</p>;
}

Without this cleanup function, the interval would keep running even after the Timer component was removed from the screen — a classic memory leak. React calls the cleanup function right before running the effect again (if dependencies changed) and one final time when the component unmounts.

Avoiding Infinite Loops

One of the most common useEffect bugs happens when an effect updates a piece of state that is also listed in its own dependency array — without a condition to stop it. Each state update triggers a re-render, the re-render re-runs the effect, and the effect updates state again, forever.

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

  useEffect(() => {
    setCount(count + 1); // updates count...
  }, [count]);            // ...which re-triggers this same effect, forever

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

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

  useEffect(() => {
    // Only run once, and use a functional update if it must reference count
    const id = setInterval(() => setCount(prev => prev + 1), 1000);
    return () => clearInterval(id);
  }, []); // empty array — runs once, no unnecessary re-triggering

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

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

useEffect connects your components to the outside world — servers, timers, subscriptions, and the browser itself — while keeping rendering logic itself pure. Getting the dependency array right, and always cleaning up after effects that need it, are the two habits that separate solid useEffect code from a source of subtle bugs.

Next, you will learn useRef — a Hook for holding mutable values and referencing DOM elements directly, without triggering re-renders.