Fix polling not stopping after dismount

Author: MajorLift

ui/hooks/useCurrencyRatePolling.ts

@@ -40,13 +40,7 @@ const useNativeCurrencies = (isPollingEnabled: boolean) => {
     ? enabledChainIds
     : chainIds;
 
-  const isMounted = useRef(false);
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  });
+  const isMounted = useRef(true);
 
   useEffect(() => {
     // Use validated currency tickers
@@ -76,6 +70,10 @@ const useNativeCurrencies = (isPollingEnabled: boolean) => {
       }
     };
     fetchNativeCurrencies();
+
+    return () => {
+      isMounted.current = false;
+    };
   }, [
     chainIds,
     isPollingEnabled,
@@ -96,8 +94,6 @@ const useCurrencyRatePolling = () => {
   // usePolling is a custom hook that is invoked synchronously.
   usePolling({
     startPolling: currencyRateStartPolling,
-    // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31879
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     stopPollingByPollingToken: currencyRateStopPollingByPollingToken,
     input: nativeCurrencies,
     enabled,

ui/hooks/usePolling.ts

@@ -19,15 +19,16 @@ const usePolling = <PollingInput>(
     JSON.stringify(usePollingOptions.input) !==
     prevPollingInputStringified.current;
 
+  const isMounted = useRef(false);
+
   useEffect(() => {
-    let isMounted = false;
     if (usePollingOptions.enabled === false || !hasPollingInputChanged) {
       return () => {
         // noop
       };
     }
 
-    isMounted = true;
+    isMounted.current = true;
 
     const cleanup = () => {
       if (pollTokenRef.current) {
@@ -41,10 +42,8 @@ const usePolling = <PollingInput>(
       .startPolling(usePollingOptions.input)
       .then((pollToken) => {
         pollTokenRef.current = pollToken;
-        // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31880
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        cleanupRef.current = usePollingOptions.callback?.(pollToken) || null;
-        if (!isMounted) {
+        cleanupRef.current = usePollingOptions.callback?.(pollToken) ?? null;
+        if (!isMounted.current) {
           cleanup();
         }
       });
@@ -55,11 +54,15 @@ const usePolling = <PollingInput>(
 
     // Return a cleanup function to stop polling when the component unmounts
     return () => {
-      isMounted = false;
+      isMounted.current = false;
       prevPollingInputStringified.current = null;
       cleanup();
     };
-  }, [hasPollingInputChanged, usePollingOptions.enabled]);
+  }, [
+    usePollingOptions.input,
+    hasPollingInputChanged,
+    usePollingOptions.enabled,
+  ]);
 };
 
 export default usePolling;