DEV Community: Fernando Villalba

Is there a silent bug in your useEffect?

Fernando Villalba — Tue, 07 Apr 2026 18:59:29 +0000

Rapid changes in searches or navigation generate multiple simultaneous requests. Without control, the response that arrives last (even if it contains obsolete data) will overwrite the state, displaying incorrect information. A silent but critical error.

The Problem: Race Conditions

When the order of responses does not match the order of requests.

Common Code (The Error)

Click A → "Data A" is requested
Click B → "Data B" is requested
Network: B arrives (Fast) → UI shows "Data B" ✓
Network: A arrives (Late) → UI overwrites with "Data A" ✗

Even though the user clicked B last and wants to see those data, the interface ends up showing obsolete information from A. This happens because each request updates the state without verifying if it is still relevant.

The Solution (AbortController)

The key to solving this is canceling the previous request before firing the new one. The native AbortController API allows us to do this elegantly:

useEffect(() => {
  const controller = new AbortController(); // 1. We create the controller

  fetch(`/api/user/${id}`, { signal: controller.signal }) // 2. We pass the signal
    .then(data => setUser(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        // We handle only real errors, not cancellations
      }
    });

  // 3. Cleanup function: we cancel if the component
  // unmounts or the ID changes
  return () => controller.abort();
}, [id]);

Does your useEffect have a silent bug?

Fernando Villalba — Tue, 07 Apr 2026 18:56:44 +0000

The Problem: Race Conditions

When the order of responses does not match the order of requests.

Common Code (The Error)

Click A → "Data A" is requested
Click B → "Data B" is requested
Network: B arrives (Fast) → UI shows "Data B" ✓
Network: A arrives (Late) → UI overwrites with "Data A" ✗

The Solution (AbortController)

The key to solving this is canceling the previous request before firing the new one. The native AbortController API allows us to do this elegantly:

useEffect(() => {
  const controller = new AbortController(); // 1. We create the controller

  fetch(`/api/user/${id}`, { signal: controller.signal }) // 2. We pass the signal
    .then(data => setUser(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        // We handle only real errors, not cancellations
      }
    });

  // 3. Cleanup function: we cancel if the component
  // unmounts or the ID changes
  return () => controller.abort();
}, [id]);

¿Tu useEffect tiene un bug silencioso?

Fernando Villalba — Tue, 07 Apr 2026 15:27:36 +0000

Cambios rápidos en búsquedas o navegación generan múltiples peticiones simultáneas. Sin control, la respuesta que llegue última (aunque sea para datos obsoletos) sobrescribirá el estado, mostrando información incorrecta. Un error silencioso pero crítico.

El Problema: Race Conditions

Cuando el orden de las respuestas no coincide con el de las peticiones.

El Código Común (El error)

Click A → Se solicita "Datos A"
Click B → Se solicita "Datos B"
Red: Llega B (Rápido) → UI muestra "Datos B" ✓
Red: Llega A (Tarde) → UI sobrescribe con "Datos A" ✗

Aunque el usuario hizo clic en B último y quiere ver esos datos, la interfaz termina mostrando información obsoleta de A. Esto sucede porque cada petición actualiza el estado sin verificar si sigue siendo relevante.

La Solución (AbortController)

La clave para solucionar esto es cancelar la petición anterior antes de disparar la nueva. La API nativa AbortController nos permite hacer esto de forma elegante:

useEffect(() => {
  const controller = new AbortController(); // 1. Creamos el controlador

  fetch(`/api/user/${id}`, { signal: controller.signal }) // 2. Pasamos la señal
    .then(data => setUser(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        // Manejamos solo errores reales, no cancelaciones
      }
    });
  });

  // 3. Función de limpieza: cancelamos si el componente
  // se desmonta o el ID cambia
  return () => controller.abort();
}, [id]);