title: displaing one array multiple times in react
body: <p>when i sent message i want it to display .
  but now its displaying same message multiple time like 4/5 times .</p>
  <pre><code>const [messages, setMessages] = useState([]);
  
  
  
  socket.on(room, (msg) =&gt; {
     setMessages(message=&gt;[...message, msg]);
  });
  
  
  </code></pre>
  <pre><code>return (
          &lt;div style={{ &quot;paddingTop&quot;: &quot;10px&quot;, &quot;backgroundColor&quot;: &quot;rgb(85, 85, 85)&quot; }} className=&quot;chat-messages&quot;&gt;
              {
                  messages ? messages.map((message,index) =&gt; (
                      &lt;div className=&quot;message &quot; key={index}&gt;
                          &lt;p className=&quot;meta&quot;&gt; {message.user} &lt;span&gt; {message.time} &lt;/span&gt; &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
                          &lt;p className=&quot;text&quot; style={{ &quot;maxWidth&quot;: &quot;80ch&quot;, &quot;overflowWrap&quot;: &quot;break-word&quot; }}&gt; {message.msg} &lt;/p&gt;
                      &lt;/div&gt;
                  )) : ''
              }
          &lt;/div&gt;
      )
  
  </code></pre>
  <p>edit :</p>
  <p>i noticed that its socket receiving (room) many times</p>
  <pre><code>    msgHelpers.addMessage(msgD.room, sm, date).then((id) =&gt; {
        console.log(&quot;before emit&quot;);
        io.emit(id, sm);
      });
  </code></pre>
  <p>but in backend its sending just once ...
  its printing &quot;before emit&quot; just once .</p>