Basically the same question as How to cancel a javascript function if the user scrolls the page but using react hooks.

I wrote react code that scrolls down to the end of the page after 3 seconds.

const scrollToEnd = () => { /* implementation omitted */ }

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

I want modify this code so that if the user manually scrolls the page before this timeout, the timeout is cleared.

I was thinking of a solution like:

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)
}, [])

This works, but I don't think this is the correct way to approach this problem, because the scroll event is fired multiple times, even after the timeout occurs. Also the scrollCallback isn't really canceled, it runs anyway even if it does nothing.