title: having diffculty to empty the state in react-native
body: <p>Hy, I'm working on react-native to integrate WebSocket. I'm setting the list state <code>const [messagesList, setMessagesList] = useState([])</code> when I set the messages in the list but facing an issue which is that <strong>when I map the list on the second time it also display the pervious data</strong>
  like on first map it print</p>
  <pre><code>Hello Adil
  How're you?
  </code></pre>
  <p>when I get the new data it also map it again:</p>
  <pre><code>Hello Adil // first map
  How're you? // first map
  //second map
  Hello Adil
  How're you?
  new message
  new message
  </code></pre>
  <p>I want my old messages to remain on-screen but don't display them again on the screen
  here's the code:
  <strong>Setting the state</strong></p>
  <pre><code> setMessagesList((messagesList)=&gt;[...messagesList,{'msg':type,'user':data.text}])
  </code></pre>
  <p><strong>map the messageList</strong></p>
  <pre><code>messagesList.map((msg,index)=&gt;{
        return(
          &lt;View style={{flexDirection:'row',
          justifyContent:msg.user == 'adilijaz.09@gmail.com' ? 'flex-start' : 'flex-end'
  
          }} &gt; 
          &lt;Text&gt;{msg.msg}--{msg.user}&lt;/Text&gt;
        &lt;/View&gt; 
        )
        })
  </code></pre>