title: Duplicate socket.io listener when using useEffect
body: <pre><code>React.useEffect(() =&gt; {
      socket
        .on(conversationName, (message) =&gt; {
          // push into list messages a new one 
        });
    }, [conversationName]);
  </code></pre>
  <p>When user chose a conversation on the sidebar, a conversation name will be sent back from backend and stored in React state called <code>conversationName</code>. I used an useEffect to catch that change</p>
  <p>Also a socket is listening on event name <code>conversationName</code> to get new messages.</p>
  <p>My problem is the message that user sent will be duplicated <strong>n times</strong> when he switch back to a specific conversation <strong>n times</strong></p>
  <p>For example, there are 2 conversations called A and B. He clicks to A, chit chat some messages, clicks to B and then clicks back to A. Any message he sent from now on is duplicated 2 times.</p>
  <p>Looking for some advice, many thanks guys !</p>