title: Is there a way to avoid re-render continuously when calling a WebSocket from React component?
body: <p>I have a stuck with avoiding component re-render when I use a Websocket for receiving data and update them to UI. I have a component named A and I use a Websocket into it for receiving a real-time message and then show it to UI. I use &quot;useEffect&quot; hook like that:</p>
  <pre><code>function User() {
    let ws = new Websocket(host);
    let [users, setUser] = useState([]);
  
    useEffect(() =&gt; {
     let message = [];
     ws.onmessage = evt =&gt; {
       message = JSON.parse(evt.data);
       setUser(message);
     }}, [users]);
   
   return (
      &lt;div className=&quot;user-table&quot;&gt;
        &lt;Table users={users} /&gt;
      &lt;/div&gt;
     )
  }
  </code></pre>
  <p>Because the Websocket frequently has the new data (1 second), it causes the component always update. So, is there any way for avoiding this problem? (caching or something like that)</p>