Fix/logs keep pooling after unmount (#44585)

frontend/src/metabase/admin/tasks/components/Logs/Logs.unit.spec.tsx

@@ -97,6 +97,20 @@ describe("Logs", () => {
         expect(screen.getByText(errMsg)).toBeInTheDocument();
       });
     });
+
+    it("should stop polling on unmount", async () => {
+      fetchMock.get("path:/api/util/logs", [log]);
+      const { unmount } = render(<Logs />);
+      expect(
+        await screen.findByText(new RegExp(log.process_uuid)),
+      ).toBeInTheDocument();
+
+      unmount();
+      act(() => {
+        jest.advanceTimersByTime(1100); // wait longer than polling period
+      });
+      expect(utilSpy).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe("log processing", () => {

frontend/src/metabase/admin/tasks/components/Logs/hooks.ts

 import { useInterval } from "@mantine/hooks";
 import { useState, useEffect, useRef, useCallback } from "react";
-import { useMount } from "react-use";
+import { useMount, useUnmount } from "react-use";
 import { t } from "ttag";
 import _ from "underscore";
 
@@ -50,10 +50,11 @@ export function usePollingLogsQuery(pollingDurationMs: number) {
     isMountedRef.current = true;
     fetchLogs();
     pollingInterval.start();
-    return () => {
-      isMountedRef.current = false;
-      pollingInterval.stop();
-    };
+  });
+
+  useUnmount(() => {
+    isMountedRef.current = false;
+    pollingInterval.stop();
   });
 
   return { loaded, error, logs };