How to cleanup this fetchEvent function used in a useEffect hook? [duplicate]

Question

 useEffect(() => {
    const fetchData = async () => {
      await fetchEventSource(`/weborders/${agentId}/web_stream`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          //  keepAlive: true,
        },
        onopen(res) {
          if (res.ok && res.status === 200) {
            console.log("Connection Established", res);
          } else if (
            res.status >= 400 &&
            res.status < 500 &&
            res.status !== 429
          ) {
            console.log("Client Side Failure", res);
          }
        },
        onopen(res) {
          console.log("Connection Established", res);
        },
        onmessage(event) {
          // console.log(event.data);
          const parsedData = JSON.parse(event.data);
          //  setSseData((data) => [...data, parsedData]);
          setSseData([parsedData]);
        },
        onclose() {
          console.log("Connection Closed by the Server");
        },
        onerror(err) {
          console.log("There was an error from the Server!", err);
        },
      });
    };
    fetchData();
  }, []);

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 "@microsoft/fetch-event-source";

Answer 1

Aborting the controller like this seems to work.

useEffect(() => {
    const controller = new AbortController();
    const fetchData = async () => {
      await fetchEventSource(
        `http://localhost:8000/weborders/${agentId}/web_stream`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            //  keepAlive: true,
          },
          signal: controller.signal,
          onopen(res) {
            if (res.ok && res.status === 200) {
              console.log("Connection Established", res);
            } else if (
              res.status >= 400 &&
              res.status < 500 &&
              res.status !== 429
            ) {
              console.log("Client Side Failure", res);
            }
          },
          onopen(res) {
            console.log("Connection Established", res);
          },
          onmessage(event) {
            // console.log(event.data);
            const parsedData = JSON.parse(event.data);
            //  setSseData((data) => [...data, parsedData]);
            setSseData([parsedData]);
          },
          onclose() {
            console.log("Connection Closed by the Server");
          },
          onerror(err) {
            console.log("There was an error from the Server!", err);
          },
        }
      );
    };
    fetchData();
    return () => controller.abort();
  }, []);