Компонент React рендерится несколько раз при использовании сокета io

В моем приложении я генерирую событие сокета всякий раз, когда пользователь получает новое сообщение, и я пытаюсь отобразить реакцию внешнего интерфейса с помощью socket.io-client.

Мой код реакции выглядит следующим образом

import React, { useState, useEffect, useContext, useRef } from "react"
import io from "socket.io-client"
import StateContext from "../../../StateContext"

const Received = () => {
  const appState = useContext(StateContext)

  const [inbox, setInbox] = useState([])
  const ENDPOINT = "http://localhost:3008"

  let socket = useRef()

  const fetchInbox = () => {
    axios.post("/messages")
      .then((res) => {
        console.log(res.data)
        setInbox(res.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }

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


  useEffect(() => {
    console.log("connection created")

    socket.current = io(ENDPOINT, {
      withCredentials: true
    });

    socket.current.on("connect", () => {
      console.log(socket.current.id)
      socket.current.emit('join', { email: appState.email })
    })

    socket.current.once("new message", (msg) => {
      console.log(msg)
      setInbox(oldMsgs => [...oldMsgs, msg])
    })

    socket.current.on("disconnect", () => {
      console.log("disconnected")
    })

    return () => socket.current.disconnect();

  }, [ENDPOINT])

и мой код на стороне сервера. Я передаю экземпляр сокета из файла app.js в файл message.js и генерирую событие сокета. В файле messages.js

const emit_messages = (user_ids, new_message) => {
    try {
        user_ids.map((userid) => {
            io.sockets.in(userid).emit("new message", new_message)
        })
    }
    catch (err) {
       console.log(err)
    }
}

Мой реагирующий код рендерится несколько раз, даже если я объявил зависимости в хуке useEfect. Моя проблема аналогична той, что указана в этом вопросе о стеке.

socket.current.once срабатывает только по одному запросу. Для последующих запросов он не запускается.

Может ли кто-нибудь помочь мне решить эту проблему?

и как правильно использовать socket.io в реакции и почему компонент рендерится много раз

Любая помощь приветствуется. Спасибо ...


person Lohitha Y    schedule 07.06.2021    source источник