title: React app gets slow renders slow after emitting socketio message
body: <p>I have a react app. The code does work perfectly but after using it. It starts getting slow. After waiting for a while you can use it again.</p>
  
  <p>When you press a button, I use socketio to emit a message.</p>
  
  <p><strong>Function call takes longer after using it multiple times.</strong>
  <img src="https://cdn.discordapp.com/attachments/103696749012467712/444218701244530699/unknown.png"></p>
  
  <p>The function call is part of <code>websocket.js</code>. However when you dig deeper in the functions it seems like react rendering is taking longer.</p>
  
  <p><strong>Function that is taking a lot of time.</strong>
  <img src="https://cdn.discordapp.com/attachments/103696749012467712/444218941179691018/unknown.png"></p>
  
  <p>So react takes a lot of time to render the view. I can only think then that I don't delete something which will use a lot of memory and thus slow down the rendering process. On the picture you see that it is in the file <code>react-dom.development.js</code>, the issue also occurs when it is build for production.</p>
  
  <pre><code>import React, { Component } from 'react';
  import Card from './Card.js'
  
  class Game extends Component {
    constructor(props) {
      super(props);
      this.state = {
        socket: this.props.socket,
        card: {
          "name": "",
          "cardValues": {}
        }
      }
      this.props.socket.emit("startGame");
    }
    render() {
      let {socket, card} = this.state;
      socket.on("startGame", (data) =&gt; this.setState({
          card: data["card"],
      }))
      socket.on("nextCard", (data) =&gt; this.setState({
          card: data["nextCard"],
      }))
      return (
        &lt;div className="Game"&gt;
            &lt;p&gt;GAME&lt;/p&gt;
            &lt;Card socket={socket} card={this.state.card}/&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Game;
  </code></pre>
  
  <p>This part uses the class <code>Card</code>.</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Card extends Component {
    constructor(props) {
      super(props);
      this.state = {
        socket: this.props.socket,
      }
    }
  
    chooseCardValue = (value) =&gt; {
        this.state.socket.emit("chooseCard", {"cardValue": value});
    }
  
    render() {
      let card = this.props.card;
      return (
        &lt;div className="Card"&gt;
            &lt;h3 className="Country"&gt;{card["name"]}&lt;/h3&gt;
            &lt;ul&gt;
              {
                Object.keys(card["cardValues"]).map((value, i) =&gt; {
                  return &lt;li key={i}&gt;&lt;button onClick = {
                      this.chooseCardValue.bind(null, value)
                  }&gt;{value}: {card["cardValues"][value]}&lt;/button&gt;&lt;/li&gt;
                })
              }
            &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Card;
  </code></pre>
  
  <p>It is here where the buttons are defined. When you click the button it triggers the function <code>chooseCardValue</code> which becomes slow after time.</p>
  
  <p>Why does it become so slow, and what is the cause?</p>
  
  <p>I tried to only include the parts that could be relevant. The whole classes are available here just in case: <a href="https://lpaste.net/3474101090415280128" rel="noreferrer">https://lpaste.net/3474101090415280128</a> </p>