Frontend Engineering | VoidX Academy

24. useEffect (Side Effects)

Handling the Outside World

A React component's primary job is pure: it takes data (props/state) and returns UI (JSX). Anything that happens outside of this pure rendering process—like fetching data from a server, setting a timer, or manually interacting with the browser's DOM—is called a Side Effect. We manage these safely using the useEffect hook.

The Anatomy of useEffect

The useEffect hook takes two arguments: a callback function to run, and an optional dependency array that controls exactly when the function runs.

import { useState, useEffect } from 'react';

export default function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  // 1. The Effect Function
  useEffect(() => {
    console.log("Fetching data for user:", userId);
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
      
  // 2. The Dependency Array
  }, [userId]); 

  return <div>{user ? user.name : 'Loading...'}</div>;
}

The Dependency Array Rules

The dependency array dictates the execution timing of your effect. Getting this wrong is the #1 cause of bugs in React.

No array: useEffect(() => {...}) Runs after EVERY single render. This is extremely dangerous and easily causes infinite loops if you update state inside.
Empty array: useEffect(() => {...}, []) Runs EXACTLY ONCE when the component first mounts (appears on the screen), and never again.
With variables: useEffect(() => {...}, [userId]) Runs on mount, AND subsequently whenever the value of `userId` changes.

The Cleanup Function

If your effect creates an ongoing process (like a setInterval or an Event Listener on the window), you must clean it up when the component leaves the screen to prevent memory leaks.

useEffect(() => {
  const timer = setInterval(() => console.log('Tick'), 1000);

  // Returning a function tells React to run this code when the component unmounts,
  // or right before the effect re-runs due to a dependency change.
  return () => {
    clearInterval(timer);
    console.log('Component unmounted, timer cleared');
  };
}, []);

Knowledge Check

Ready to test your understanding of 24. useEffect (Side Effects)?

23. Events

25. Conditional Rendering