Si suscribes eventos de esta forma debes seguir leyendo. Muchos desarrolladores usan useRef y useEffect para añadir event listeners y luego eliminarlos manualmente en el cleanup. Un patrón común es crear funciones onDrag y onDrop, llamar a ref.current.addEventListener y en el return del useEffect ejecutar ref.current.removeEventListener para cada suscripción. Esto funciona, pero puede generar mucho código repetitivo y ser propenso a olvidos cuando hay muchas suscripciones o cuando se integran librerías de terceros que no son React.
En lugar de depender siempre de removeEventListener es más limpio y moderno usar AbortSignal y AbortController. AbortSignal es un objeto que puede pasarse a fuentes de eventos compatibles, ya sea addEventListener o APIs de suscripción, y permite cancelar todas las suscripciones asociadas llamando a abortController.abort. De ese modo no hace falta llevar un registro manual de cada unsubscribe.
Mejora práctica del useEffect: dentro del efecto crea un AbortController, extrae el signal y pásalo a cada addEventListener. Al devolver en el cleanup una llamada a abortController.abort todas las suscripciones se cancelan de forma segura. En palabras sencillas: crear un abortController por efecto, pasar signal a cada suscripción y abortar al desmontar.
Para abstraer este patrón y reducir aún más código es útil un hook personalizado que gestione el ciclo del AbortController. Un ejemplo conceptual es useEffectScoped que recibe un callback al que se le pasa el signal. El hook crea el AbortController, llama al callback con el signal y en el cleanup aborta el controller. De este modo el componente queda muy limpio y las suscripciones se declaran sin preocuparse por el unsubscribe individual.
Ventajas de esta aproximación: menos código repetido, menor probabilidad de fugas de memoria, integración más segura con APIs modernas como ResizeObserver o IntersectionObserver, y una forma clara de encapsular suscripciones procedentes de librerías externas. Además encaja bien con prácticas de desarrollo de aplicaciones a medida y software a medida donde la robustez y la mantenibilidad son clave.
Ejemplo conceptual de uso en un componente: crear ref con useRef, llamar a useEffectScoped pasando un callback que verifica ref.current y añade listeners usando el signal proporcionado. No hace falta invocar removeEventListener para cada suscripción porque abortController.abort lo gestionará.
Si trabajas con observadores de tamaño utiliza ResizeObserver, y para detectar entrada en el viewport usa IntersectionObserver. Cuando debes integrar una librería externa que expone suscripciones manuales, envolver esas suscripciones en un AbortSignal o un patrón similar simplifica la limpieza y reduce errores.
En Q2BSTUDIO solemos aplicar este tipo de buenas prácticas al desarrollar soluciones empresariales. Somos una empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad y servicios cloud. Si buscas crear productos robustos y seguros podemos ayudarte tanto en el desarrollo de aplicaciones como en la integración de Desarrollo de aplicaciones a medida como en proyectos de inteligencia artificial para empresas.
Palabras clave relevantes que aplicamos en nuestros proyectos incluyen aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi. Ofrecemos servicios integrales que van desde la planificación y desarrollo hasta la seguridad, automatización y despliegue en la nube.
Si quieres que revisemos tu código o que diseñemos una arquitectura que use patrones como AbortSignal y hooks personalizados para mejorar la calidad y estabilidad, en Q2BSTUDIO podemos ayudar con consultoría, desarrollo y puesta en producción.
Resumen rápido: evita el unsubscribe manual cuando puedas, usa AbortController y AbortSignal dentro de useEffect, abstrae el patrón en un hook reutilizable y así simplificas la lógica de limpieza y aumentas la mantenibilidad de tus aplicaciones.
