为什么页面底部的定义并不总是有效？

我不明白怎么回事，我观察到一个奇怪的效果。当用户接近页面底部时，我需要加载内容。
我有一个禁止或允许加载内容的状态，它在少于某个数量的时候被激活到底部。这是状态：

const [fetching, setFetching] = useState(true);
useEffect(() => {
    if(fetching) {
         // тут обновляю состояние которое добавляет новый контент
    }
}, [fetching])

还有滚动状态

useEffect(() => {
    document.addEventListener("scroll", scrollHandler)

    return () => document.removeEventListener("scroll", scrollHandler)

}, [])

好吧，scrollHandler 本身：

const scrollHandler = (e: any) => {
    if(e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 100 ) {
        setFetching(true)
    }
}

事实是，如果您设置setFetching(true)小于 100px 到页面末尾时，一切正常，但是使用此值，用户可以看到内容是如何加载的，但是您想隐藏这一时刻，为此您需要将值增加，例如，增加到 1000

const scrollHandler = (e: any) => {
    if(e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 1000 ) {
        setFetching(true)
    }
}

而这里有趣的开始了，内容可以随时停止加载，我不明白这是怎么回事，或者是因为addEventListener和removeEventListener批量操作，还是其他一些原因。如何解决问题或以不同的方式实施？