Real-Time Chat Application

One of the most serious mistakes in real-time React apps is creating socket connections directly inside multiple components. It may work during the first test, but after navigation, re-rendering, or hot reload, the app can accidentally open several active connections. This causes duplicate messages, repeated listeners, memory leaks, and confusing bugs where one user message appears two or three times in the UI.

Problematic approach:

          function ChatRoom({ roomId }) {
            const socket = io("http://localhost:3000");

            socket.emit("join-room", roomId);

            socket.on("message", (message) => {
              setMessages((messages) => [...messages, message]);
            });

            return <MessageList messages={messages} />;
          }

This code creates a new socket every time the component renders. It also registers listeners without cleanup, so old listeners may continue reacting even after the user leaves the room.

Better approach:

          const socket = io("http://localhost:3000", {
            autoConnect: false
          });

          function SocketProvider({ children }) {
            useEffect(() => {
              socket.connect();

              return () => {
                socket.disconnect();
              };
            }, []);

            return (
              <SocketContext.Provider value={socket}>
                {children}
              </SocketContext.Provider>
            );
          }

Room-level subscription example:

          function ChatRoom({ roomId }) {
            const socket = useSocket();

            useEffect(() => {
              socket.emit("join-room", { roomId });

              function handleMessage(message) {
                if (message.roomId !== roomId) return;

                setMessages((currentMessages) => [
                  ...currentMessages,
                  message
                ]);
              }

              socket.on("message", handleMessage);

              return () => {
                socket.emit("leave-room", { roomId });
                socket.off("message", handleMessage);
              };
            }, [socket, roomId]);

            return <MessageList messages={messages} />;
          }

Pay attention to: Keep the WebSocket connection centralized and long-lived. Components should subscribe to events and clean up after themselves, but they should not create uncontrolled socket instances.

A real-time chat application usually supports multiple rooms or conversations. A common mistake is storing all messages in one array and filtering them during render. This becomes fragile when the user switches rooms quickly, receives messages from inactive rooms, restores history after refresh, or needs unread counters per room.

Problematic code:

          const [messages, setMessages] = useState([]);

          function handleIncomingMessage(message) {
            setMessages((currentMessages) => [
              ...currentMessages,
              message
            ]);
          }

          const visibleMessages = messages.filter((message) => {
            return message.roomId === activeRoomId;
          });

This approach can work for a small demo, but the state model does not clearly isolate rooms. It also makes room-specific persistence, pagination, unread states, and cleanup more difficult.

Better approach:

          const [messagesByRoomId, setMessagesByRoomId] = useState({});

          function handleIncomingMessage(message) {
            setMessagesByRoomId((rooms) => {
              const currentRoomMessages = rooms[message.roomId] || [];

              return {
                ...rooms,
                [message.roomId]: [
                  ...currentRoomMessages,
                  message
                ]
              };
            });
          }

          const visibleMessages = messagesByRoomId[activeRoomId] || [];

Even better with normalized message IDs:

          const chatState = {
            messagesById: {
              "message-1": {
                id: "message-1",
                roomId: "room-1",
                text: "Hello!",
                authorId: "user-1",
                createdAt: 1710000000000
              }
            },
            roomMessageIds: {
              "room-1": ["message-1"],
              "room-2": []
            }
          };

Pay attention to: Store messages by room ID from the beginning. Each room should have its own message stream, typing state, unread count, and persistence logic. This prevents data leakage between conversations.

Typing indicators are useful, but they can easily flood the network. If your app emits a typing event on every key press, a fast typist can send dozens of socket events in a few seconds. With multiple users and rooms, this creates unnecessary traffic and can make the UI feel unstable.

Problematic code:

          function MessageInput({ roomId }) {
            const socket = useSocket();

            function handleChange(event) {
              setMessage(event.target.value);

              socket.emit("typing", {
                roomId,
                userId: currentUser.id
              });
            }

            return <input value={message} onChange={handleChange} />;
          }

This sends an event for every character. It also never clearly tells other clients when the user stopped typing.

Better approach:

          function MessageInput({ roomId }) {
            const socket = useSocket();
            const [message, setMessage] = useState("");
            const typingTimeoutRef = useRef(null);
            const isTypingRef = useRef(false);

            function handleChange(event) {
              setMessage(event.target.value);

              if (!isTypingRef.current) {
                socket.emit("typing-started", {
                  roomId,
                  userId: currentUser.id
                });

                isTypingRef.current = true;
              }

              clearTimeout(typingTimeoutRef.current);

              typingTimeoutRef.current = setTimeout(() => {
                socket.emit("typing-stopped", {
                  roomId,
                  userId: currentUser.id
                });

                isTypingRef.current = false;
              }, 1200);
            }

            return <input value={message} onChange={handleChange} />;
          }

Server-side cleanup idea:

          socket.on("disconnect", () => {
            removeUserFromTypingLists(socket.userId);

            server.emit("typing-users-updated", {
              userId: socket.userId
            });
          });

Pay attention to: Typing indicators are temporary UI signals. They should be throttled, debounced, and automatically cleared when users stop typing, disconnect, or leave a room.

A chat app should not trust the client to decide who sent a message or who is allowed to edit or delete it. Beginners often send userId from the frontend and let the server accept it as truth. This creates a serious security issue because users can modify the request and impersonate someone else.

Problematic approach:

          socket.emit("send-message", {
            roomId: activeRoomId,
            userId: selectedUserId,
            text: messageText
          });

Weak server handling:

          socket.on("send-message", async (payload) => {
            const message = await Message.create({
              roomId: payload.roomId,
              authorId: payload.userId,
              text: payload.text
            });

            server.to(payload.roomId).emit("message", message);
          });

In this version, the server accepts payload.userId directly. A malicious user could send another person's ID.

Better approach:

          socket.on("send-message", async (payload) => {
            const authenticatedUser = socket.data.user;

            if (!authenticatedUser) {
              socket.emit("error", {
                message: "You must be logged in to send messages."
              });
              return;
            }

            const canAccessRoom = await checkRoomMembership({
              roomId: payload.roomId,
              userId: authenticatedUser.id
            });

            if (!canAccessRoom) {
              socket.emit("error", {
                message: "You do not have access to this room."
              });
              return;
            }

            const message = await Message.create({
              roomId: payload.roomId,
              authorId: authenticatedUser.id,
              text: sanitizeMessageText(payload.text)
            });

            server.to(payload.roomId).emit("message", message);
          });

Pay attention to: The server should derive the sender from the authenticated socket session, not from the message payload. The same rule applies to editing, deleting, room access, and private conversations.

A small demo chat with twenty messages renders easily. A real chat room can contain hundreds or thousands of messages. If every message is always mounted in the DOM, the app can become slow, scrolling can feel heavy, and every new message may trigger expensive re-renders.

Problematic code:

          function MessageList({ messages }) {
            return (
              <div className="messages">
                {messages.map((message) => (
                  <MessageItem key={message.id} message={message} />
                ))}
              </div>
            );
          }

This is acceptable at the beginning, but it does not scale. It also gives you no control over how much history should be loaded or persisted.

Improved approach with limited visible history:

          const MAX_VISIBLE_MESSAGES = 100;

          const visibleMessages = useMemo(() => {
            return messages.slice(-MAX_VISIBLE_MESSAGES);
          }, [messages]);

          function MessageList({ messages }) {
            return (
              <div className="messages">
                {visibleMessages.map((message) => (
                  <MemoizedMessageItem
                    key={message.id}
                    message={message}
                  />
                ))}
              </div>
            );
          }

          const MemoizedMessageItem = React.memo(MessageItem);

Pagination-friendly structure:

          async function loadOlderMessages(roomId, beforeMessageId) {
            const olderMessages = await api.getMessages({
              roomId,
              before: beforeMessageId,
              limit: 30
            });

            prependMessagesToRoom(roomId, olderMessages);
          }

Pay attention to: For a portfolio project, it is enough to show that you understand the problem. Add pagination, memoized message items, controlled history size, or virtual scrolling if you want the project to feel more production-ready.