App crashes the message recipients browsers.

[deniercounter]

On the decision of eventually avoiding the bloating of a project by using socket.io I came across your YouTube channel. Surprisingly if you send some 20 messages in one room on the first browser the second browser with a different user in the same room crashes and only receives max up to twelve messages (tested with FF, Chrome, Chromium, Edge).

https://github.com/deniercounter/Realtime-Chat-Application/tree/18-08-2021/show-browser-crashing

I only changed client/containers/Messages.tsx -> handleSendMessage() in order to test it faster.

function handleSendMessage() {
    const date = new Date();
    numberOfSentMessages.current++;
    newMessageRef.current.value = `${
      numberOfSentMessages.current
    }. Message from ${username} @ ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}:${date.getMilliseconds()}`;
    const message = newMessageRef.current.value;

    if (!String(message).trim()) {
      return;
    }

    socket.emit(EVENTS.CLIENT.SEND_ROOM_MESSAGE, { roomId, message, username });

    setMessages([
      ...messages,
      {
        username: "You",
        message,
        time: `${date.getHours()}:${date.getMinutes()}`,
      },
    ]);

    newMessageRef.current.value = `Here is ${username} (This msg will be replaced onClick SEND Button...)`;
  }

[tomanagle]

Thank you for picking this up! The issue was that setting the messages needed to be in a useEffect with a dependency on socket. I've pushed my changes and supplied a patch here: https://github.com/TomDoesTech/Realtime-Chat-Application/blob/main/setMessages.patch