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

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

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

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

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

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

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

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

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

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

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

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

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

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

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])

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

Сергей Сергей, жалуется на 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>
                        )
                    })}

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

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

[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]);

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

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

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

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

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

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

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

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);
    }, []);

Толку то?

Почему arr.includes возвращает false при проверки идентичного массива?

twobomb, да, вы правы, спасибо, я как-то не подумал об этом, я посчитал что свойства + значения проверяет, а не ссылку

Центр обновлений windows 11 не работает, как исправить?

John Smith, винда стояла с каким-то малварём, я очень долго выкуривал его, проц был 50% стабильно, компуктер готовый брал пару лет назад в спешке)

Центр обновлений windows 11 не работает, как исправить?

Drno, вид её приелся, функционал

Центр обновлений windows 11 не работает, как исправить?

Хм, звучит неплохо, мейби попробую, но позже, спасибо

Центр обновлений windows 11 не работает, как исправить?

John Smith, поставлена с оф. дистрибутива, я с шиндоус сильно не разбирался, максимум ставил один раз с флешки, так что чайник такой себе. Спасибо, буду иметь ввиду и такие варианты)

Центр обновлений windows 11 не работает, как исправить?

Василий Банников, да я уже отложил в прошлый раз, хз сколько времени прошло, вспомнил)

Центр обновлений windows 11 не работает, как исправить?

Да хз на самом деле, по стабильности всё отлично и по работе, единственное не обновляется и меня напрягает это. Десятка уже приелась дико, прям тошнит. Как только вышла 11, сразу воткнул через оф. установщик, повторюсь, стабильно работает в плане всего, кроме вот этого момента)