chore: add cleanup callbacks to some useEffect calls (#13444)

aslilac · web-flow · commit 0ea89a3d4139 · 2024-06-04T12:18:03.000-06:00
diff --git a/site/src/contexts/useProxyLatency.ts b/site/src/contexts/useProxyLatency.ts
@@ -225,6 +225,10 @@ export const useProxyLatency = (
         // Local storage cleanup
         garbageCollectStoredLatencies(proxies, maxStoredLatencies);
       });
+
+    return () => {
+      observer.disconnect();
+    };
   }, [proxies, latestFetchRequest, maxStoredLatencies]);
 
   return {
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -245,20 +245,32 @@ const useFileTree = (templateVersion: TemplateVersion | undefined) => {
     fileTree: undefined,
     tarFile: undefined,
   });
+
   useEffect(() => {
+    let stale = false;
     const initializeFileTree = async (file: ArrayBuffer) => {
       const tarFile = new TarReader();
-      await tarFile.readFile(file);
-      const fileTree = await createTemplateVersionFileTree(tarFile);
-      setState({ fileTree, tarFile });
+      try {
+        await tarFile.readFile(file);
+        // Ignore stale updates if this effect has been cancelled.
+        if (stale) {
+          return;
+        }
+        const fileTree = createTemplateVersionFileTree(tarFile);
+        setState({ fileTree, tarFile });
+      } catch (error) {
+        console.error(error);
+        displayError("Error on initializing the editor");
+      }
     };
 
     if (fileQuery.data) {
-      initializeFileTree(fileQuery.data).catch((reason) => {
-        console.error(reason);
-        displayError("Error on initializing the editor");
-      });
+      void initializeFileTree(fileQuery.data);
     }
+
+    return () => {
+      stale = true;
+    };
   }, [fileQuery.data]);
 
   return state;
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
@@ -97,7 +97,10 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
       setProgressValue(est);
       setProgressText(text);
     };
-    setTimeout(updateProgress, 5);
+    const updateTimer = requestAnimationFrame(updateProgress);
+    return () => {
+      cancelAnimationFrame(updateTimer);
+    };
   }, [progressValue, job, transitionStats]);
 
   // HACK: the codersdk type generator doesn't support null values, but this
diff --git a/site/src/utils/templateVersion.ts b/site/src/utils/templateVersion.ts
@@ -23,9 +23,9 @@ export const getTemplateVersionFiles = async (
   return files;
 };
 
-export const createTemplateVersionFileTree = async (
+export const createTemplateVersionFileTree = (
   tarReader: TarReader,
-): Promise<FileTree> => {
+): FileTree => {
   let fileTree: FileTree = {};
   for (const file of tarReader.fileInfo) {
     fileTree = set(
