title: Receiving same message multiple times via web socket. The older messages are replaced after 3 or 4 new chat messages
body: <p>I am integrating <strong>web sockets</strong> into React with Django in back-end.</p>
  <p>I am able to send messages, and receive the new messages from the back-end.</p>
  <p><strong>The problem</strong> is that after sending 3 or 4 messages, the previous messages are getting replaced by the new messages in the front-end, but all is fine in the back-end, and in fact everything works normally after I refresh.</p>
  <p>How to properly update state for situations like this?</p>
  <h3>Edit:</h3>
  <p>The main problem which I found now is, when I send a chat, the state gets updated multiple times, and its length changes everytime and the screen flutters a lot.</p>
  <p><strong>slice</strong></p>
  <pre><code>name: 'chat',
  initialState: {
          chatMessages: [],
  }
  
  reducers: {
          setChatMessages(state, action) {
              const chatmessages = action.payload;
              return {...state, chatMessages:chatmessages}; 
          },
  }
  </code></pre>
  <p><strong>chat</strong></p>
  <pre><code>const chatMessagesSelector = useSelector(selectChats);
  const chatMessages = chatMessagesSelector?.chatMessages
  
      chatSocket.onmessage = (e) =&gt; {
      var data = JSON.parse(e.data)
      var message = {message: data.message, user: data.user,
                      timestamp: data.timestamp};  
      //console.log(message)
      let updatedMessages = [...chatMessages];
      updatedMessages.push(message);
      dispatch(setChatMessages(updatedMessages));
  }
  </code></pre>
  <p>This is the <code>chatMessages</code> object logged above the <code>updatedMessages</code>.</p>
  <pre><code>Array(1)
  0: {user: &quot;testuser&quot;, message: &quot;check!&quot;, timestamp: &quot;2021-03-09T09:15:09.408717+01:00}
  length: 1
  </code></pre>