From d99ea44e4794f13b6ffb669bd91afd71f2e12b8b Mon Sep 17 00:00:00 2001
From: Supriya Mishra <supriyamishra05992@gmail.com>
Date: Thu, 10 Mar 2022 01:46:38 +0530
Subject: [PATCH] - Added ability to cancel the processing of streams promise
 when streams has changed. This fixes #44.

---
 packages/react-app/src/views/Home.jsx | 40 +++++++++++++++++----------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/react-app/src/views/Home.jsx b/packages/react-app/src/views/Home.jsx
index d9a6a62..ed2883f 100644
--- a/packages/react-app/src/views/Home.jsx
+++ b/packages/react-app/src/views/Home.jsx
@@ -70,21 +70,33 @@ export default function Home({
 
   const [sData, setData] = useState([]);
 
-  useEffect(async () => {
-    // parallely load all available streams data
-    Promise.all(
-      streams.map(async (stream) => {
-        const summary = await resolveStreamSummary(stream.stream, mainnetProvider);
-        return {...stream, 3: summary.cap, percent: summary.percent};
-      })
-    ).then(results => {
-      setData(results);
+  useEffect(() => {
+    let shouldCancel = false;
+    const fetchStreams = async () => {
+      // parallely load all available streams data
+      Promise.all(
+        streams.map(async (stream) => {
+          const summary = await resolveStreamSummary(stream.stream, mainnetProvider);
+          return { ...stream, 3: summary.cap, percent: summary.percent };
+        })
+      ).then(results => {
+        // process promised streams only when this effect call is not cancelled.
+        if (!shouldCancel) {
+          setData(results);
 
-      // Wait until list is almost fully loaded to render
-      if (results.length >= 18) {
-        setReady(true);
-      }
-    });
+          // Wait until list is almost fully loaded to render
+          if (results.length >= 18) {
+            setReady(true);
+          }
+        }
+      });
+    }
+
+    fetchStreams()
+      .catch(console.error);
+
+    // cleanup callback
+    return () => shouldCancel = true;
   }, [streams]);
 
   const createNewStream = async () => {