Node.js 在 React 和 Socket.io 中使用 Effect 钩子重新渲染两次

我正在使用Reaction和Socket构建一个实时聊天应用程序，以掌握基本知识.每当用户发送消息时，所有其他用户都会收到两次相同的消息.

我正在使用Reaction路由来提供一个加入‘页面’和一个聊天‘页面’.

function App() {
  return (
    <div className="App">

      <Router>
        <Routes>
          <Route path="/" element={<Join />} />
          <Route path="/chat/:name" element={<Chat />} />
        </Routes>
      </Router>

    </div>
  );
}

在聊天页面，也就是用户之间呈现消息的地方，我使用的是useEffect钩子，但我正在努力完全理解它.

function Chat () {
  const [messages, addMessage] = useState([{
    username: "chatbot",
    time: new Date(),
    message: "Welcome to the chatroom ????"
  }]);

  const location = useLocation();
  const [currentUser, updateUser] = useState(() => {
    const user = location.pathname.split('/chat/')[1];
    socket.emit("join_chat", {
      username: user
    })
    return user;
  });

  useEffect(() => {
    socket.on("receive_message", (data) => {
      console.log('received message');
      addMessage(prevMessages => {
        return [...prevMessages, {
          username: data.username,
          time: new Date(),
          message: data.message
        }]
      })
    })
  }, [socket])

  const sendMessage = (e) => {
    e.preventDefault();
    socket.emit("send_message", {
      message: currentMessage,
      username: currentUser,
    });

每次发送消息时，控制台日志(log)都会在接收端运行两次.

据我所知，钩子允许我们定义一些代码，这些代码将在DOM发生更改时运行，所以我不确定这种更改在哪里发生了两次？

我也不确定为什么这socket.on人一开始就应该住在useEffect号楼里.如果useEffect只是在重新呈现后立即调用，它如何仍然通过套接字接收每一条消息？