Why does useState() duplicate websocket events?

Question

My react component is receiving messages from a server via a websocket. When I try to update state using useState() the sockets get duplicated.

If I do this...

import React, {useState} from 'react'

export default () => {

    let[message, setMessage] = useState()

    let ws = new WebSocket("ws://blah");

    ws.onmessage = (e) => {
        let obj = JSON.parse(e.data);

        // event name
        console.log(obj.event);

        // event data
        console.log(obj.value);

        // setMessage(obj.value)

        ws.close
    }
    return <div>
            {message}

    </div>
}

Then the console shows each message on its own as expected

But if I comment back in setMessage(object.value) then all the connections are duplicated for every message

Somehow the setMessage() causes connections to be accumulated

Answer 1

That's because you're are creating a new websocket on every render.

Since connecting to a web socket is a "side effect" you'll want to use useEffect

import React, {useState} from 'react'

export default () => {

  let [message, setMessage] = useState()

  React.useEffect(() => {
    let ws = new WebSocket("ws://blah");

    ws.onmessage = (e) => {
      let obj = JSON.parse(e.data);

      // event name
      console.log(obj.event);

      // event data
      console.log(obj.value);

      setMessage(obj.value);
    };

    return () => {
      ws.close()
    }
  }, [])


  return (
    <div>
      {message}
    </div>
  );
}