The useEffect Hook in React

So far, our components have been pure functions: they receive data, render UI, and respond to user events.

But real applications need to do things outside their component world. They need to fetch data from a server, subscribe to keyboard events, manipulate the DOM directly, or set timers.

To be able to integrate this type of actions within React’s declarative philosophy, we have the Hook useEffect.

What is useEffect?

useEffect is a Hook that allows us to execute code after React has rendered the component and updated the DOM.

Think of it as the place where we say:

React, once you’re done painting the screen, do this other thing

The basic syntax of useEffect accepts two arguments:

import { useEffect } from 'react';

useEffect(() => {
  // Effect code (API requests, subscriptions...)
}, [/* dependencies */]);

The Dependency Array

The most interesting point (and the source of most bugs) of useEffect lies in its second argument. Depending on what we pass in the array, the effect will behave differently.

useEffect(() => {
  console.log("I run every time the component paints");
});

useEffect(() => {
  console.log("I run only once on startup (Mount)");
  
  // Ideal for initial API calls
  fetch('/api/users').then(data => ...);
}, []); // <--- Empty array

const [id, setId] = useState(1);

useEffect(() => {
  console.log(`The ID has changed to ${id}, fetching new data...`);
  // Runs at start and every time 'id' changes
}, [id]);

The Cleanup Function

Sometimes, effects create persistent “mess”. For example, if we create a setInterval or subscribe to a global event with addEventListener, those processes will stay alive even if the component disappears from the screen, causing memory leaks.

To avoid this, useEffect allows us to return a cleanup function.

React will execute this function at two times:

useEffect(() => {
  // 1. Setup
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // 2. Cleanup (return function)
  return () => {
    console.log("Cleaning up the event...");
    window.removeEventListener('resize', handleResize);
  };
}, []);

Race Conditions

One of the most common problems when fetching data (Data Fetching) inside a useEffect are Race Conditions.

Imagine this scenario:

1. The user selects “Id 1”, the effect fetches data (takes 3 seconds to arrive).
2. The user quickly changes to “Id 2”, the effect fetches the data (takes 0.5 seconds to arrive).
3. The data for Id 2 arrives and is displayed.
4. The data for Id 1 arrives (because it was slower) and overwrites those of Id 2

To solve this, we use a pattern with a boolean variable ignore (or cancelled) inside the effect:

useEffect(() => {
  let ignore = false; // Control flag

  async function fetchData() {
    const json = await getData(id);
    // Only update if this effect is still the "valid" one
    if (!ignore) {
      setData(json);
    }
  }

  fetchData();

  // If the component unmounts or the id changes before finishing,
  // we set ignore to true.
  return () => {
    ignore = true;
  };
}, [id]);

// ❌ Bad
const [firstName, setFirstName] = useState('Luis');
const [lastName, setLastName] = useState('Llamas');
const [fullName, setFullName] = useState('');

useEffect(() => {
  setFullName(firstName + ' ' + lastName);
}, [firstName, lastName]);

// ✅ Good (Derived state)
const fullName = firstName + ' ' + lastName;