I load messages by 20 pieces, update the state when it reaches 0 on scroll and twist the block 20 messages back. But after a few scrolls, the page freezes and I get a warning in the console: [Violation] 'message' handler took 187ms
I tried e.preventDefault() - didn't work, e.stopPropagation() - similar. Please tell me what I did wrong?
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();
}
}}
Thanks.
import { useState, useCallback } from 'react';
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.target.scrollTo(0, e.target.querySelector('.direct-chat-msg:nth-child(20)').offsetTop);
e.stopPropagation();
}
}
const debouncedChangeHandler = useCallback(
debounce(changeHandler, 250)
, []);
onScroll={ debouncedChangeHandler}
The working but my handler not update states messages and prevMessages all time two empty arrays
const debounce = (func, wait) => {
let timeout;
return (() => {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => func(), wait)
})();
}
const changeHandler = (e) => {
console.log(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),[]);