useEffect

useEffect: Managing Side Effects, Dependencies & Cleanup

The useEffect hook lets functional components perform side effects after rendering, such as fetching data from external APIs, setting up timer intervals, subscribing to events, or directly manipulating the DOM.

Effect Execution Flow

flowchart TD
    Render["Component Renders JSX"] --> Browser["Browser Paints Screen"]
    Browser --> Effect["useEffect Callback Fires"]
    Effect --> CleanupCheck{"Component Unmounts or Deps Change?"}
    CleanupCheck -- Yes --> Cleanup["Execute Return Cleanup Function () => ..."]

Dependency Array Configurations

Practical Code Example: API Fetching with Abort Controller Cleanup

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // AbortController prevents race conditions on fast userId changes
    const controller = new AbortController();

    async function fetchUserData() {
      setLoading(true);
      try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {
          signal: controller.signal,
        });
        if (!response.ok) throw new Error('Failed to load user');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchUserData();

    // Effect Cleanup Function: Runs on unmount or before effect re-runs
    return () => {
      controller.abort();
    };
  }, [userId]); // Dependency: re-run whenever userId prop changes

  if (loading) return <div>Loading user #{userId}...</div>;
  if (error) return <div className="error">Error: {error}</div>;

  return (
    <div className="profile">
      <h3>{user?.name}</h3>
      <p>Email: {user?.email}</p>
      <p>Company: {user?.company?.name}</p>
    </div>
  );
}

Best Practices & Gotchas

• Always Clean Up Subscriptions & Timers: Return a cleanup function inside useEffect to clear setInterval, remove event listeners, or abort pending fetch calls.
• Never Omit Declared Dependencies: If your effect uses state or prop variables inside its body, declare them in the dependency array to avoid stale closure bugs.

Self-Check Challenge

Write a useEffect hook that listens to window resize events and updates a windowWidth state variable with proper event listener cleanup.