React
Explica cómo limpiar suscripciones, cancelar solicitudes y evitar race conditions en Effects mediante cleanup, AbortController e identidad de cada operación.
Un effect debe poder iniciar y detener la sincronización que controla.
useEffect(() => {
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);La limpieza ocurre antes de volver a ejecutar el effect y al desmontar.
useEffect(() => {
const controller = new AbortController();
async function load() {
const response = await fetch(`/api/users/${userId}`, {
signal: controller.signal,
});
const user = await response.json();
setUser(user);
}
load().catch((error) => {
if (error.name !== "AbortError") setError(error);
});
return () => controller.abort();
}, [userId]);Si userId cambia rápido, una respuesta antigua puede llegar después de una nueva y sobrescribirla. Cancelar o ignorar respuestas obsoletas evita ese problema.
En desarrollo React ejecuta setup, cleanup y setup adicionalmente para detectar efectos que no son reversibles.
Cada ejecución de effect representa una sincronización concreta y debe poder invalidarse.
Un effect no tiene un único setup global. Cada combinación de dependencias crea una sincronización concreta:
roomId = general → setup A
roomId cambia
→ cleanup A
roomId = support → setup B
unmount → cleanup BEl cleanup debe deshacer exactamente el trabajo del setup correspondiente.
useEffect(() => {
function handleResize() {
setWidth(window.innerWidth);
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);La misma referencia handleResize se usa para registrar y retirar. Crear otra función en cleanup no elimina el listener anterior.
useEffect(() => {
const id = window.setInterval(refresh, intervalMs);
return () => window.clearInterval(id);
}, [intervalMs]);Cuando cambia el intervalo, React cancela el timer anterior antes de establecer el siguiente.
No toda operación puede abortarse. Dos estrategias:
AbortController detiene APIs compatibles, como fetch.
useEffect(() => {
let ignore = false;
async function load() {
const result = await legacyRequest(userId);
if (!ignore) setUser(result);
}
void load();
return () => {
ignore = true;
};
}, [userId]);La operación puede continuar, pero no actualiza la instancia invalidada.
userId y se solicita B.El orden de respuesta no tiene por qué coincidir con el de solicitud. El cleanup marca cuál ejecución sigue siendo válida.
Una request puede terminar justo antes de llamar abort, o puede existir transformación asíncrona posterior. Comprueba el signal o la vigencia antes de aplicar resultados.
if (controller.signal.aborted) return;
setState({ status: "success", data });useEffect(() => {
const unsubscribe = store.subscribe(handleChange);
return unsubscribe;
}, [store]);El contrato de subscribe debe devolver una limpieza idempotente. Para stores externas compartidas, useSyncExternalStore ofrece garantías adicionales sobre snapshots y rendering concurrente.
Se ejecuta:
Por eso mensajes como “component unmounted” pueden ser imprecisos dentro del cleanup; también puede tratarse de una re-sincronización.
setup → cleanup → setupSi aparecen listeners duplicados, conexiones abiertas o timers múltiples, el setup no era reversible. No introduzcas una ref para impedir la segunda ejecución; corrige cleanup y diseño.
Algunas mutaciones pueden repetirse por reintentos, navegación o doble activación. La idempotencia pertenece al servidor o protocolo, no solo al effect:
No inicies compras o eliminaciones críticas automáticamente desde effects si corresponden a una acción del usuario.
Un abort esperado no debería mostrarse como fallo:
catch (error) {
if (controller.signal.aborted) return;
setError(toMessage(error));
}No dependas únicamente de error.name, porque distintas APIs pueden representar cancelación de maneras diferentes.
Cancelar requests obsoletas no resuelve:
Para aplicaciones reales, una capa de server state o el framework puede ser mejor que effects manuales.
Cuando aparecen datos equivocados:
removeEventListener no limpia el listener?AbortController?Cuándo no necesitas un Effect elimina sincronizaciones que en realidad son cálculos o eventos.