title: Sending multiple unwanted data over a Web Sockets in React
body: <p>I am quite new to react and I have been trying to send data from react app to the server using web sockets. I am also using setInterval to send it every 2 seconds. My problem comes when I modify(even manually) the weatherData, which is just an array of objects. Then my app start sending the new modified object but keeps on sending the old one which was initiated at the beginning.</p>
  <p>React Code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>useEffect(() =&gt; {
          const ws = new WebSocket("ws://localhost:5000/websockets/weatherStation");
  
          let interval;
  
          ws.addEventListener('open', () =&gt; {
              console.log("We are connected");
  
              const interval = setInterval(function () {
                  ws.send(JSON.stringify(weatherData));
              }, 2000);  //repeat every 2sec
  
          })
          return () =&gt; clearInterval(interval);
      }, [])</code></pre>
  </div>
  </div>
  </p>
  <p>I am clearing the setInterval on component unmount  but I think the problem comes because the setInterval is in a callback. I have been hitting my head with this for quite some time.</p>
  <p>Can someone give me an advice how to stop the old setInterval?</p>