Как исправить violetion took 200ms при скролле блока с подгрузкой сообщений?

Question

[historydev]

Здравствуйте. Подгружаю сообщения по 20 штук, обновляю стейт при достижении 0 по скроллу и кручу блок на 20 сообщений назад. Но спутся несколько прокруток страница зависает и я получаю предупреждение в консоли:

[Violation] 'message' handler took 187ms

Я попробовал e.preventDefault() - не сработало, e.stopPropagation() - аналогично.
Скажите пожалуйста что я сделал не так?

onScroll={(e) => {
                    if(e.target.scrollTop < 1) {
                        const msgID = prevMessages.length ? parseInt(prevMessages[0].id) : parseInt(messages[0].id);
                        console.log(msgID);
                        socket.emit('getPrevMessages', {roomId, msgID});
                        e.target.scrollTo(0, e.target.querySelector('.direct-chat-msg:nth-child(20)').offsetTop);
                        e.stopPropagation();
                    }
                }}

Спасибо.

Comments

[insighter]

В обработчике скролла ты делаешь скролл? Может стоит это делать по таймауту, не в этом же обработчике? Похоже на зацикливаение.

[historydev]

insighter,

function debounce(func, wait) {
        let timeout;
        return () => {
            if (timeout) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(func, wait)
        }
    }

    const changeHandler = (e) => {
        if(e.target.scrollTop < 1) {
            const msgID = prevMessages.length ? parseInt(prevMessages[0].id) : parseInt(messages[0].id);
            console.log(msgID);
            socket.emit('getPrevMessages', {roomId, msgID});
            //e.stopPropagation();
        }
    }

    const debouncedChangeHandler = useCallback((e) => {
        debounce(() => changeHandler(e), 250);
        debounce(() => {
            if(e.target.scrollTop < 1) e.target.scrollTo(0, e.target.querySelector('.direct-chat-msg:nth-child(20)').offsetTop)
        }, 250);
    }, []);

Толку то?