title: Socket.io returning multiple times for one event
body: <p>Before this is flagged as a duplicate, I have checked the majority of other posts and solutions, to no avail. If anyone wants to double check, here they are: </p>
  
  <p>1) <a href="https://stackoverflow.com/questions/30813309/socket-io-multiple-returns-for-a-single-event">Socket.io Multiple returns for a single event</a>
  2) <a href="https://stackoverflow.com/questions/19162582/socket-io-message-event-firing-multiple-times">Socket.io message event firing multiple times</a><br>
  3) <a href="https://stackoverflow.com/questions/49788422/socket-on-event-gets-triggered-multiple-times">socket.on event gets triggered multiple times</a> </p>
  
  <p>And many others.</p>
  
  <p><strong>Now to get to the meat of my question!</strong></p>
  
  <p>I have a socket in my client and my server code. Once my server-side socket emits a message, it is received by the client-side socket and prints out the message. With research, this probably ties into event listeners, but I can't find out how to apply it to my code. FYI the following client code is ran when a button is clicked.</p>
  
  <p><em>Here are snippets of my client code</em></p>
  
  <pre><code>onButtonClick() {
       socket.emit('message_to_server', 'ping');
  
       socket.on('reply', (tmp) =&gt; {
            console.log(tmp); // in this case, call it 'pong'
            this.doSomethingWithMe(tmp);
       });
  }
  
  doSomethingWithMe(msg) {
  // do something with the information
  }
  </code></pre>
  
  <p>The first time I click the button, I receive </p>
  
  <pre><code>&gt; pong
  </code></pre>
  
  <p>The second time I click the button, I receive</p>
  
  <pre><code>&gt; pong
  &gt; pong
  </code></pre>
  
  <p>It continues to grow exponentially. </p>
  
  <p>I can post my server code if needed, but I'm 100% sure that it emits the information correctly.</p>
  
  <p><strong>Does anyone have any idea for fixing this issue? I can't figure out how the listeners play into this scenario, so I would appreciate any advice!</strong></p>
  
  <p><strong>EDIT:</strong> I changed some of my code to the following: </p>
  
  <pre><code>import React ...
  
  const socket = socketIOClient('http://localhost:3000')
  
  socket.on('reply', (tmp) =&gt; {
       console.log(tmp); // in this case, call it 'pong'
       var inst = new drawMe();
       inst.doSomethingWithMe(tmp);     
  });
  
  class drawMe extends Component {
       constructor(props) { this.state = { allData: ''}}
  
       onButtonClick() {
            ...
       }
  
       doSomethingWithMe(data) {
            this.setState({ allData: data });
       }
  </code></pre>
  
  <p>I am now receiving an error saying that you cannot call <code>setState</code> on a component that is not yet mounted. I probably will not open another question for this issue, but I would appreciate any advice on it. If mods/anyone wants me to close, I have no problem doing so. </p>
  
  <p><strong>EDIT2:</strong> If anyone else has this issue, I made it work by moving the code to instantiate the socket and for the event inside my constructor. </p>