Как обновлять состояние чтобы избежать рекурсии?

Question

[historydev]

Здравствуйте. Столкнулся с ошибкой violation 200+, решил исправить debounce - его нужно коллить один раз, я так и делаю, однако получаю ошибку что нельзя получить id у undefined. id я пытаюсь получить у prevMessages и messages - они являются состояниями:

const 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); // prevMessages and messages = useState([])
            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((e) => debounce(() => changeHandler(e), 250), []); // Если попробовать [prevMessages, messages] - получаю рекурсию и зависание страницы

Скажите пожалуйста как правильно это реализовать? Обработчик вешаю на scroll блока.

Спасибо.

Comments

[Михаил]

Опишите подробнее цель всего этого фрагмента. Пока ничего не понятно.

[historydev]

Михаил, подгружать старые сообщения по мере прокрутки вверх

[historydev]

Михаил, https://stackoverflow.com/questions/71190939/how-t...

[Сергей Сергей]

Какой-то неправильный debounce, аргументы не жуёт.

function debounce( f, delay = 40 ) {
  let t;
  return function( ...a ) {
    clearTimeout( t );
    t = setTimeout( f.bind( this ), delay, ...a );
  }
}

[historydev]

Сергей Сергей, не я писал и слабо понимаю как он должен выглядеть в идеале, сейчас попробую ваш вариант, спасибо

[historydev]

Сергей Сергей, я получаю возрастание задержки:

[Violation] 'message' handler took 208ms
index.js:242 4492
index.js:79 false
30index.js:79 true
2.9ce607ef.chunk.js:2 [Violation] 'message' handler took 669ms
index.js:242 4492
index.js:79 false
62index.js:79 true
2.9ce607ef.chunk.js:2 [Violation] 'message' handler took 2065ms

Вот с таким кодом:

function debounce( f, delay = 40 ) {
        let t;
        return function( ...a ) {
            clearTimeout( t );
            t = setTimeout( f.bind( this ), delay, ...a );
        }
    }

    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((e) => debounce(changeHandler(e), 250), [prevMessages, messages]);

[historydev]

Сергей Сергей, жалуется на message, но message я юзаю только при рендере:

{prevMessages.map((message, i, arr)=>{

                        let sender = '';
                        if(message.senderId === roomId) {
                            sender = 'messageSender';
                        }

                        return sender ? (
                            <div key={message.id} id={`msg${message.id}`} className={`direct-chat-msg msg-to ${sender} 
                                        ${message.readStatus !== 0 ? 'isRead' : 'isNotRead'}`}>
                                <img class="direct-chat-img" src="../img/user3-128x128.jpg" alt="User avatar"/>
                                <div className="direct-chat-text">
                                                <span className="direct-chat-timestamp">{
                                                    `${message.createDate.split('T')[0]} | ${message.createDate.split('T')[1].split(':')[0]}:${message.createDate.split('T')[1].split(':')[1]}`
                                                }</span>
                                    {message.text}
                                </div>
                            </div>
                        ) : (
                            <div key={message.id} id={`msg${message.id}`} className={`direct-chat-msg msg-to ${sender} 
                                        ${message.readStatus !== 0 ? 'isRead' : 'isNotRead'}`}>
                                <div className="direct-chat-text">
                                    <i className={'fas fa-check faCheck'}></i>
                                    <span className="direct-chat-timestamp">{
                                        `${message.createDate.split('T')[0]} | ${message.createDate.split('T')[1].split(':')[0]}:${message.createDate.split('T')[1].split(':')[1]}`
                                    }</span>
                                    {message.text}
                                </div>
                                <img className="direct-chat-img" src="../img/user3-128x128.jpg" alt="User avatar" />
                            </div>
                        )
                    })}

[Alexandroppolus]

Не очень понятна картина в целом. Где, например, изменение prevMessages и messages?

[Сергей Сергей]

const debouncedChangeHandler = useCallback(debounce(changeHandler, 250), [prevMessages, messages]);

[historydev]

Alexandroppolus, prevMessages изменяю по сокету:

useEffect(() => {

        socket.on('getPrevMessages', data => {
            setPrevMessages(prev => [...prev, ...data]);
            if(prevMessages.length) {
                const sliced = prevMessages.slice(-20);
                setDataState(data[0].id === sliced[0].id);
                console.log(data[0].id === sliced[0].id);
            }
        });

    }, [prevMessages])

[historydev]

Сергей Сергей, я уже по всякому пробовал, так было изначально как вы предлагаете:

[historydev]

Сергей Сергей, оно не сразу, а спустя прокруток так 5-6, когда ползунок уменьшается и по нарастающей идёт

[Alexandroppolus]

Владимир, useEffect надо поправить, а то сейчас он совсем грустный - вызывается на каждом рендере, с добавлением подписки.

useEffect(() => {

        socket.on('getPrevMessages', data => {
            setPrevMessages(prev => [...prev, ...data]);
        });

    }, [])

setDataState - это что? тоже какой-то стейт? он меняется где-то кроме этого кода? если нет, то заменить на useMemo

[Сергей Сергей]

как работает useCallback и где потом привязывается debouncedChangeHandler?

[Сергей Сергей]

можно ещё throttle.

[historydev]

Сергей Сергей, useCallback вроде как useEffect но в роле обработчика, то есть он возвращает в роли себя эту функцию и обновляется, если обновляются состояния из [], я в реакте не сильно разбираюсь, сам этот useCallback увидел первый раз пару дней назад) Вот здесь привязывается:

<div class="direct-chat-messages" ref={(el) => { messagesBox = el; }} onScroll={debouncedChangeHandler}>
                    {prevMessages.map((message, i, arr)=>{

[historydev]

Alexandroppolus, нет, я его буду юзать чтобы снимать обработчик при достижении конца элементов (чтобы не откидывало на 20 сообщений назад бесконечно)

[historydev]

Alexandroppolus, заказчик сказал что это mvp и тут такое говно-кодище, что я еле разобрался что здесь и как) Допиливаю всё костылём на костыле, лишь бы работало. Потом переписывать это всё буду с нуля и нормально, с его слов.

[Сергей Сергей]

Функциональная чушь получается с этим вашим useCallback.

const debouncedChangeHandler = debounce( useCallback(changeHandler, [prevMessages, messages]), 250 );

По идее, в этом варианте есть риск, что массивы сообщений не пройдут и будут undefined, я не знаю. А при успехе как раз будет отложенный запуск реактивной фигни со своей проверкой, что там он хочет.
Но вообще, что-то мутить с жонглированием обработчиков событий — плохая затея.

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

[historydev]

Сергей Сергей, я что-то похожее на ваш вариант писал пару часов назад, потом откатывал, сейчас посмотрю, спасибо

[historydev]

Сергей Сергей, вроде работает, спасибо большое

[historydev]

Сергей Сергей, но да, получается prevMessages = undefined

[historydev]

Сергей Сергей, а нет, всё ок)