Как решить проблему с подгрузкой контента при скролле?

Question

[Станислав]

Не могу понять в чем дело, наблюдаю странный эффект. Мне нужно подгружать контент, когда пользователь приближается к низу страницы.
У меня есть состояние, которое запрещает либо разрешает подгружать контент, и активируется оно в тот момент когда до низа остается меньше определенного числа. Вот состояние:

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, или ещё каких-то причин. Как решить проблему или реализовать по-иному?