When building real-time features in React with Socket.IO, you need to both listen for events coming from the server and send events back. Socket.IO provides two main methods for this: socket.on to listen for events and socket.emit to send events.

To listen for an event, you use socket.on("eventName", callback). The "eventName" is a string that matches the event sent from the server, and the callback is a function that runs when the event is received. In React, you often want to update component state when you receive new data. For example, if you are building a chat app and want to update the message list when a new message arrives, you can use socket.on inside a useEffect hook to set up the event listener when the component mounts.

To send an event to the server, use socket.emit("eventName", data). The "eventName" should match what the server expects, and data is any value you want to send. For instance, when a user sends a new message, you might call socket.emit("sendMessage", messageObject).

Here is a simple example showing how you might use these methods in a React component to handle chat messages:

import { useEffect, useState } from "react";

function Chat({ socket }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");

  useEffect(() => {
    // Listen for incoming messages
    socket.on("message", (newMessage) => {
      setMessages((prevMessages) => [...prevMessages, newMessage]);
    });

    // Clean up the listener on unmount
    return () => {
      socket.off("message");
    };
  }, [socket]);

  const sendMessage = () => {
    if (input.trim() !== "") {
      socket.emit("sendMessage", input);
      setInput("");
    }
  };

  return (
    <div>
      <ul>
        {messages.map((msg, idx) => (
          <li key={idx}>{msg}</li>
        ))}
      </ul>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type your message"
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

In this example, socket.on("message", ...) listens for new messages from the server and updates the messages state. The sendMessage function uses socket.emit to send a message to the server. The listener is set up inside a useEffect hook to ensure it is registered when the component mounts and cleaned up when the component unmounts.

When updating state in response to socket events, always use the functional form of state setters (like setMessages(prev => [...prev, newMessage])) if the new state depends on the previous state. This avoids bugs due to stale state values, especially when multiple events arrive quickly.

You should also make sure to clean up event listeners with socket.off when the component unmounts or when the socket changes. This prevents memory leaks and ensures your component does not respond to events after it is removed from the UI.