Básicamente, la misma pregunta que Cómo cancelar una función de JavaScript si el usuario se desplaza por la página pero usa ganchos de reacción.

Escribí un código de reacción que se desplaza hacia abajo hasta el final de la página después de 3 segundos.

 const scrollToEnd = () => { /* implementation omitted */ } useEffect(() => { const id = setTimeout(() => scrollToEnd(), 3000) return () => clearTimeout(id) }, [])

Quiero modificar este código para que si el usuario desplaza manualmente la página antes de este tiempo de espera, se borre el tiempo de espera.

Estaba pensando en una solución como:

 const [hasScrolled, setHasScrolled] = useState(false); const scrollToEnd = () => { /* implementation omitted */ } useEffect(() => { const setHasScrolledCallback = () => setHasScrolled(true) window.addEventListener("scroll", setHasScrolledCallback); return () => window.removeEventListener("scroll", setHasScrolledCallback); }, []); useEffect(() => { const scrollCallback = () => { if (hasScrolled) scrollToEnd() } const id = setTimeout(scrollCallback, 3000) return () => clearTimeout(id) }, [])

Esto funciona, pero no creo que esta sea la forma correcta de abordar este problema, porque el evento de desplazamiento se activa varias veces, incluso después de que se agota el tiempo de espera. Además, scrollCallback no se cancela realmente, se ejecuta de todos modos incluso si no hace nada.