0Pricing
React Academy · Lección

Condiciones de carrera y limpieza de efectos

Utilice AbortController en useEffect para cancelar solicitudes fetch obsoletas al volver a renderizar.

Condiciones de carrera y limpieza de efectos es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección aprenderá cómo se producen las condiciones de carrera en los efectos de React que obtienen datos y cómo eliminarlas mediante AbortController para realizar la limpieza.

¿Qué es una condición de carrera?

Una condición de carrera ocurre cuando dos operaciones asíncronas se completan en un orden impredecible. En React, si un usuario navega rápidamente entre elementos, una solicitud fetch lenta del elemento A puede resolverse después de la solicitud fetch del elemento B y mostrar datos obsoletos.

El error: respuesta fetch obsoleta

Sin limpieza, si el componente vuelve a renderizarse con un ID nuevo antes de que termine el fetch anterior, se ejecutan ambos fetches. El fetch más antiguo y lento puede sobrescribir en el estado los datos más recientes.
useEffect(() => {
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => setData(data)); // may run AFTER a newer fetch!
}, [id]);

Solución 1: indicador de ignorar

Una solución sencilla consiste en establecer un indicador booleano `ignore` en el efecto. La función de limpieza lo establece en true. La función de callback del fetch comprueba el indicador antes de llamar a setState.
useEffect(() => {
  let ignore = false;
  fetch('/api/item/' + id)
    .then(r => r.json())
    .then(data => { if (!ignore) setData(data); });
  return () => { ignore = true; };
}, [id]);

Solución 2: AbortController

AbortController es el estándar moderno. Cree un controlador en el efecto, pase su señal a fetch y abórtelo en la función de limpieza. El fetch lanza un AbortError que puede ignorar.
useEffect(() => {
  const controller = new AbortController();
  fetch('/api/item/' + id, { signal: controller.signal })
    .then(r => r.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name === 'AbortError') return; // expected
      setError(err.message);
    });
  return () => controller.abort();
}, [id]);

AbortController con async/await

Use try/catch con funciones async dentro de useEffect. Ignore AbortError en el bloque catch.
useEffect(() => {
  const ctrl = new AbortController();
  async function load() {
    try {
      const res = await fetch('/api/' + id, { signal: ctrl.signal });
      const json = await res.json();
      setData(json);
    } catch (e) {
      if (e.name !== 'AbortError') setError(e.message);
    }
  }
  load();
  return () => ctrl.abort();
}, [id]);

La limpieza siempre es necesaria

Aunque las condiciones de carrera sean poco probables (por ejemplo, en un fetch que se ejecuta una sola vez al montar el componente), añada siempre la limpieza. En React 18 StrictMode, los efectos se ejecutan dos veces; sin limpieza, la primera solicitud abandonada contamina el estado.

El problema de async en useEffect

El callback de useEffect no puede ser `async`. Defina una función async dentro del efecto y llámela inmediatamente, o use una función normal con .then()/.catch().
useEffect(() => {
  // useEffect callback is NOT async
  async function fetchData() { /* ... */ }
  fetchData(); // call it
  return () => ctrl.abort();
}, [id]);

Las bibliotecas se encargan de esto

React Query, SWR y RTK Query gestionan automáticamente las condiciones de carrera, la cancelación y la limpieza. Al utilizar estas bibliotecas, no necesita escribir código de AbortController manualmente.

Pruebas de condiciones de carrera

Para probar manualmente las condiciones de carrera, abra las herramientas de desarrollo de red, limite la conexión a «Slow 3G» y haga clic rápidamente entre los elementos. Sin limpieza, verá aparecer datos obsoletos durante un instante. Con AbortController, solo se muestra el último elemento seleccionado.

Comprobación rápida

¿Qué ocurre al llamar a controller.abort() en una función de limpieza de useEffect?

Resumen

Las condiciones de carrera ocurren cuando una respuesta fetch obsoleta actualiza el estado después de un fetch más reciente. Soluciónelo con un indicador de ignorar o AbortController. Aborte o ignore siempre en la limpieza de useEffect. Bibliotecas como React Query lo gestionan automáticamente.

A continuación

Siguiente lección: **useTransition para actualizaciones de la interfaz sin bloqueo**: envolverá las actualizaciones de estado costosas en startTransition para mantener la interfaz receptiva.

Preguntas frecuentes

¿La lección «Condiciones de carrera y limpieza de efectos» es gratis?

Sí — el texto completo de «Condiciones de carrera y limpieza de efectos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Condiciones de carrera y limpieza de efectos»?

Utilice AbortController en useEffect para cancelar solicitudes fetch obsoletas al volver a renderizar. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Condiciones de carrera y limpieza de efectos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Condiciones de carrera y limpieza de efectos
  2. useTransition para actualizaciones de UI no bloqueantes
  3. useDeferredValue para aplicar debounce a entradas
  4. Suspense para límites de datos y código
← Volver a React Academy