Какие могут не очищаются подписки в useEffect?

Question

[PoisonousHeart]

Привет. Я столкнулся с проблемой использования хуков и socket.io. У меня нет опыта и горят сроки, поэтому прошу компетентного мнения. Прежде чем описать проблему (я знаю, что проблем там гораздо больше и только буду рад рекомендациям по устранению их, так как я осваиваюсь в MERN), хочу рассказать о ситуации. Итак, на сервере сокет слушает сообщение "connection" там же слушает специальное сообщение от клиента. Если оно приходит - достать из БД список пользователей и отправить клиенту. Что делает клиент, при первом рендере создается 1 функция в хуке callback, то есть она будет создана 1 раз, так как с пустыми депсами. Внутри коннект сокета и установка прилетевших данных с сервака. Теперь проблема: при первом отображении все океy, но при повторном рендере какая-то утечка происходит. Я предполагаю, что это связано с хуком useState, который я использую.

В общем код сервера:

io.sockets.on('connection', socket => {
    console.log('socket connected id: ', socket.id)
    socket.emit('connection', 'hello from server')
    listenReqOnUsers(socket, 'getUserList', 'takeUserList') // Слушает запрос на выборку всех пользователей и отсылает
    listenReqOnMessages(socket, 'giveMessageList', 'getMessageList')
  

    socket.on('disconnect', () => {
        console.log('user disconnected: ', socket.id);
      })
    
})

Код слушателей на сервере:

const listenReqOnUsers = (socket, fromChannel, toChannel) => {
    socket.on(fromChannel, async () => {
        const dataUsers = await User.find()
        socket.emit(toChannel, dataUsers)
    })
}

const listenReqOnMessages = (socket, fromChannel, toChannel) => {
    socket.on(fromChannel, async () => {
        const dataUsers = await Message.find()
        socket.emit(toChannel, dataUsers)
    })
}

И проблемный клиент:

import React, { useCallback, useEffect, useState, useRef} from 'react'
import {Link} from 'react-router-dom'
import DialogUser from './DialogUser'

import socket from '../socket'


const UsersList = () => {
    const [usrs, setUsrs] = useState(null) 
    const usrsRef = useRef()

    const [mes, setMes] = useState(false)

    usrsRef.current = usrs
    
    const getUsrs = useCallback(() => {
        socket.emit('getUserList')
        socket.on('takeUserList', dataUsers => {
            console.log('Подключился к прослушиванию сообщений в user list с id: ', socket.id)
            setUsrs(dataUsers)
        })
    }, [])


    useEffect(() => {
        getUsrs()
    }, [])

    useEffect(() => {
        console.log('обновилось: ', usrsRef.current)
    }, [usrsRef.current])
    

    

    return (
        <div>
            {console.log('users: ', usrsRef.current)}
           <div style={{maxHeight: '150px', height:'150px', overflowY: 'scroll'}}>
               <div>
               {usrsRef.current !== null && usrsRef.current !== undefined && usrsRef.current.map((usr, index) => <div key = {index}>
                   {`usr email: ${usr.email}`}
                   <Link to="#" /*onClick = {() => {setMes(!mes)}}*/ className="btn-floating btn-large waves-effect waves-light red"><i className="material-icons">mail</i></Link>
                   {/* <button onClick = {() => setMes(!mes)}/> */}
               </div>)}
               </div>
            </div>
        {/* {mes && <DialogUser/>} */}
        </div>
    )
}

export default UsersList

Скрин:

Answer 1

[Владимир]

Читайте доку по useEffect
https://reactjs.org/docs/hooks-reference.html#clea...
Вы не освобождаете конекшн при анмаунте
возвращайте из useEffect функцию, которая отключится от сокета
Вот этот кусок кода у вас продолжает выполнятся после того как компонент был отмонтирован,

console.log('Подключился к прослушиванию сообщений в user list с id: ', socket.id)
            setUsrs(dataUsers)

вам 1) вынести его в отдельную функцию, при маунте делать socket.on(' не на анонимную функцию а на именованую
2) При анмаунте делать socket.off если он это поддерживает

Comments

[Владимир]

Хотя я бы работу с монго вынес бы в redux а в компонентах просто вытягивал бы стейт.
В текущей реализации потенциально может быть несколько проблем. Я не знаю реализации бекенда, если вы отписались от обновлений, а в это время прошло несколько править при следующем подключении вы получите все изменения или только новые? Если последнее, то можете на фронте терять данные

[PoisonousHeart]

Владимир, О redux даже не слышал, посмотрю. Я пока не забочусь об изменении бд и актуальных данных в этом смысле, а видимо зря. То есть, мне лучше пока забить на сокеты и поразбираться с redux? И спасибо за ответ:-)

Answer 2

[PoisonousHeart]

Ответ помог, на всякий случай он такой:

useEffect(() => {
        getUsrs()
        return () => {
            socket.offAny('takeUserList')
        }
    }, [])

---------------------------------
В именованую функцию выносить не стал, я не понимаю для чего мне нужен контекст. Или есть еще какая-то разница между ними? Просто я же сохраняю функцию в переменную и в хуке useState, ну понятно, что вызываю её, а также, спасибо Вам большое, удаляю слушателя.

Comments

[Владимир]

Я не вкурсе чего ты за либу используешь, но в документации socket io https://socket.io/docs/v3/client-api/index.html#so...
socket.offAny([listener])
listener это не строка а как раз именованая функция слушателя

const getData = function(data){
    console.log(data);
}
socket.on("news", getData);
socket.offAny(getData);

[PoisonousHeart]

Владимир, Вы знаете, я посмотрел внимательно и Вы абсолютно правы, но работает. Я предполагаю, что срабатывает какая-то перегрузка или что-то вроде и удаляются все слушатели события с таким именем. Как-то странно, что функция есть и вызывается с таким аргументом как строка, согласитесь. Что касается socket и библиотеки, то npm-ои с офф сайта недавно ставил, для клиента и сервера. Загадка какая-то. Хотя, есть нюанс, у меня ошибка со слушателем вылетала всего раз, при повторных перерендерах все работало нормально. Мб оно мне и помогает именно на тот раз первого рендера.. Лучше действительно попробую переделать. Чертовски интересно, почему так конечно:-D

[PoisonousHeart]

Владимир, Оказалось все гораздо проще:-) Тут ответ от israfel там можно передать имя события, как я и оно отключит всех связанных с ним слушателей, а мона имя события и конкретную именованую функцию, что удалит только один этот конкретный слушатель.:-) Но только для этого события, а там же еще дэфолтное создается, как я понимаю, внутри анонимной, с учетом того, что у меня там еще и emit, то она сама тоже как-то влияет, так что ее тоже желательно чистануть, как я понял.