useState in React does not update inside socket.on

[pjchungmd]

I am trying to integrate Socket IO (v3.1.1) with my react app. I am able to make a connection between the client and server. I have a button event handler that does the following:

const handleButton = (e) => {
    e.preventDefault();
    socket.emit("simple", "Button pressed");
};

The server has the following code:

io.on("connection", (socket) => {
  console.log("a user connected");

  socket.on("disconnect", () => {
    console.log("user disconnected");
  });

  socket.on("simple", (msg) => {
    io.sockets.emit("simple", "Roger that!");
  });
});

Back on the client side, after confirming that the socket connection is created, I have the following code:

const [msg, setMsg] = useState("");

socket.on("simple", (data) => {
    console.log(data);
    setMsg(data);
});

So when I press the button, I see "Button pressed" on my server's console, and "Roger that!" on my client's console. However the msg state variable is not updated. What is going? How can I get the state variable to be updated in response to emitted messages?

[anshluu]

I have the same issue. Did you figure it out @pjchungmd ?

[darrachequesne]

Hi!

That's weird, were you able to find the culprit?

Reference: https://socket.io/how-to/use-with-react