stash

Author: MajorLift

ui/components/app/currency-input/hooks/useTokenExchangeRate.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect, useRef } from 'react';
 import { toChecksumAddress } from 'ethereumjs-util';
 import { shallowEqual, useSelector } from 'react-redux';
 import { getCurrentChainId } from '../../../../../shared/modules/selectors/networks';
@@ -45,13 +45,18 @@ export default function useTokenExchangeRate(
     ? contractExchangeRates[tokenAddress] || exchangeRates[tokenAddress]
     : undefined;
 
+  const isMounted = useRef(true);
+
   useEffect(() => {
     if (!contractExchangeRate && tokenAddress) {
       setExchangeRates((prev) => ({
         ...prev,
         [tokenAddress]: LOADING,
       }));
     }
+    return () => {
+      isMounted.current = false;
+    };
   }, [contractExchangeRate, tokenAddress]);
 
   return useMemo(() => {
@@ -78,18 +83,22 @@ export default function useTokenExchangeRate(
     if (!contractExchangeRate) {
       fetchTokenExchangeRates(nativeCurrency, [tokenAddress], chainId)
         .then((addressToExchangeRate) => {
-          setExchangeRates((prev) => ({
-            ...prev,
-            // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31880
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            [tokenAddress]: addressToExchangeRate[tokenAddress] || FAILED,
-          }));
+          if (isMounted.current) {
+            setExchangeRates((prev) => ({
+              ...prev,
+              // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31880
+              // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+              [tokenAddress]: addressToExchangeRate[tokenAddress] || FAILED,
+            }));
+          }
         })
         .catch(() => {
-          setExchangeRates((prev) => ({
-            ...prev,
-            [tokenAddress]: FAILED,
-          }));
+          if (isMounted.current) {
+            setExchangeRates((prev) => ({
+              ...prev,
+              [tokenAddress]: FAILED,
+            }));
+          }
         });
       return undefined;
     }

ui/components/multichain/asset-picker-amount/asset-picker-modal/hooks/useAssetMetadata.ts

@@ -31,7 +31,7 @@ export const useAssetMetadata = (
       abortControllerRef.current?.abort();
       abortControllerRef.current = null;
     };
-  }, [abortControllerRef]);
+  }, []);
 
   const { value: assetMetadata } = useAsyncResult<
     | {

ui/hooks/useCurrencyRatePolling.ts

@@ -28,7 +28,7 @@ const usePollingEnabled = () => {
 };
 
 const useNativeCurrencies = (isPollingEnabled: boolean) => {
-  const isMounted = useRef(false);
+  const isMounted = useRef(true);
   const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
   const useSafeChainsListValidation = useSelector(
     getUseSafeChainsListValidation,
@@ -41,13 +41,6 @@ const useNativeCurrencies = (isPollingEnabled: boolean) => {
     ? enabledChainIds
     : chainIds;
 
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
   useEffect(() => {
     // Use validated currency tickers
     const fetchNativeCurrencies = async () => {

ui/hooks/usePolling.ts

@@ -56,11 +56,7 @@ const usePolling = <PollingInput>(
       prevPollingInputStringified.current = null;
       cleanup();
     };
-  }, [
-    usePollingOptions.input,
-    hasPollingInputChanged,
-    usePollingOptions.enabled,
-  ]);
+  }, [usePollingOptions, hasPollingInputChanged, usePollingOptions.enabled]);
 };
 
 export default usePolling;

ui/pages/confirmations/hooks/useAssetDetails.js

@@ -18,7 +18,7 @@ export function useAssetDetails(
   transactionData,
   chainId,
 ) {
-  const isMounted = useRef(false);
+  const isMounted = useRef(true);
   const dispatch = useDispatch();
 
   // state selectors
@@ -44,17 +44,7 @@ export function useAssetDetails(
   const prevTokenBalance = usePrevious(tokensWithBalances);
 
   useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  });
-
-  useEffect(() => {
-    if (
-      !isMounted.current ||
-      (!tokenAddress && !userAddress && !transactionData)
-    ) {
+    if (!tokenAddress && !userAddress && !transactionData) {
       return () => undefined;
     }
 

ui/pages/confirmations/hooks/useGetTokenStandardAndDetails.ts

@@ -32,6 +32,7 @@ export const useGetTokenStandardAndDetails = (
   if (!details) {
     return { decimalsNumber: undefined };
   }
+
   const { decimals, standard } = details;
 
   if (standard === TokenStandard.ERC20) {