title: How to cleanup this fetchEvent function used in a useEffect hook?
body: <pre><code> useEffect(() =&gt; {
      const fetchData = async () =&gt; {
        await fetchEventSource(`/weborders/${agentId}/web_stream`, {
          method: &quot;GET&quot;,
          headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
            //  keepAlive: true,
          },
          onopen(res) {
            if (res.ok &amp;&amp; res.status === 200) {
              console.log(&quot;Connection Established&quot;, res);
            } else if (
              res.status &gt;= 400 &amp;&amp;
              res.status &lt; 500 &amp;&amp;
              res.status !== 429
            ) {
              console.log(&quot;Client Side Failure&quot;, res);
            }
          },
          onopen(res) {
            console.log(&quot;Connection Established&quot;, res);
          },
          onmessage(event) {
            // console.log(event.data);
            const parsedData = JSON.parse(event.data);
            //  setSseData((data) =&gt; [...data, parsedData]);
            setSseData([parsedData]);
          },
          onclose() {
            console.log(&quot;Connection Closed by the Server&quot;);
          },
          onerror(err) {
            console.log(&quot;There was an error from the Server!&quot;, err);
          },
        });
      };
      fetchData();
    }, []);
  </code></pre>
  <p>Also, server-sent events are stopped properly when the browser window is minimized and automatically resumed once it comes back to the viewport but doesn't send them(sse) when viewpoint is active even when there are new events to log. Am importing fetchEventSource  imported from import { fetchEventSource } from &quot;@microsoft/fetch-event-source&quot;;</p>