Search code examples
reactjsreact-hooksuse-effect

Message received is displayed twice in ReactJs and useEffect. Tell me what I am doing wrong

    if (currentMessage !== "") {
      const messageData = {
        room: room,
        author: username,
        message: currentMessage,
        time:
          new Date(Date.now()).getHours() +
          ":" +
          new Date(Date.now()).getMinutes(),
      };

      await socket.emit("send_message", messageData);
      setMessageList((list) => [...list, messageData]);
      setCurrentMessage("");
    }
  };

  useEffect(() => {
    socket.on("receive_message", (data) => {
      setMessageList((list) => [...list, data]);
    });
  }, [socket]);

In the output, I am receiving one message twice in the receiver side. I have figured this has to be related to useEffect Hook. Please help.

Solution

  • I was having Strict Mode enabled in React that was causing the problem. Now its working fine.