React Hooks: A Deep Dive into useEffect

The Paradigm Shift: From Lifecycles to Synchronization

When React introduced Hooks in 2018, it fundamentally changed how developers thought about components. In the old Class Component era, developers relied on lifecycle methods: componentDidMount (when the component appears), componentDidUpdate (when it changes), and componentWillUnmount (when it dies). You had to split related logic across three different methods.

The useEffect Hook demands a completely different mental model. You must stop asking "When does this component mount?" and start asking "What external system does this component need to synchronize with?"

The Anatomy of useEffect

The useEffect hook takes two arguments: a callback function (the effect), and an optional Dependency Array.

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // This is the Effect. It synchronizes our state with the API.
    let isMounted = true;
    
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (isMounted) setUserData(data);
      });

    // This is the Cleanup Function.
    return () => {
      isMounted = false;
    };
  }, [userId]); // This is the Dependency Array.

  // ...render UI
}

Mastering the Dependency Array

The dependency array is the source of 99% of React bugs. It tells React exactly when to re-run your synchronization logic. React compares the values in the array from the previous render to the current render. If any value has changed, the effect fires again.

• No Array: useEffect(() => {...}) - The effect runs after every single render. If your effect updates state, you will create an infinite loop and crash the browser. Never do this.
• Empty Array: useEffect(() => {...}, []) - The effect runs exactly once after the initial render. The dependencies never change, so it never re-runs. Perfect for initial data fetching on mount.
• Populated Array: useEffect(() => {...}, [userId, theme]) - The effect runs on mount, and then re-runs only if the userId or the theme variables change.

The Critical Importance of the Cleanup Function

If your effect establishes a persistent connection—like subscribing to a WebSocket, attaching a window.addEventListener, or setting a setInterval—you must clean it up. If you don't, every time the component re-renders or unmounts, you will create a duplicate connection, resulting in a massive memory leak.

You provide a cleanup by returning a function from your effect. React guarantees that this cleanup function will run immediately before the component is destroyed, AND immediately before the effect is run again on subsequent renders. This ensures your component is always perfectly synchronized with no lingering ghost processes.