Fix logical rule violations

Author: MajorLift

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

@@ -16,6 +16,9 @@ export default function useProcessNewDecimalValue(
   isTokenPrimary: boolean,
   tokenToFiatConversionRate: Numeric | undefined,
 ) {
+  const tokenToFiatConversionRateToString =
+    tokenToFiatConversionRate?.toString();
+
   return useCallback(
     (newDecimalValue: string, isTokenPrimaryOverride?: boolean) => {
       let newFiatDecimalValue, newTokenDecimalValue;
@@ -55,6 +58,7 @@ export default function useProcessNewDecimalValue(
 
       return { newFiatDecimalValue, newTokenDecimalValue };
     },
-    [tokenToFiatConversionRate?.toString(), isTokenPrimary, assetDecimals],
+    // `tokenToFiatConversionRate` intentionally excluded to ensure that re-renders are only triggered when conversion rate value actually changes.
+    [tokenToFiatConversionRateToString, isTokenPrimary, assetDecimals],
   );
 }

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { toChecksumAddress } from 'ethereumjs-util';
 import { shallowEqual, useSelector } from 'react-redux';
 import { getCurrentChainId } from '../../../../../shared/modules/selectors/networks';
@@ -41,6 +41,19 @@ export default function useTokenExchangeRate(
     Record<string, ExchangeRate>
   >({});
 
+  const contractExchangeRate = tokenAddress
+    ? contractExchangeRates[tokenAddress] || exchangeRates[tokenAddress]
+    : undefined;
+
+  useEffect(() => {
+    if (!contractExchangeRate && tokenAddress) {
+      setExchangeRates((prev) => ({
+        ...prev,
+        [tokenAddress]: LOADING,
+      }));
+    }
+  }, [contractExchangeRate, tokenAddress]);
+
   return useMemo(() => {
     if (!selectedNativeConversionRate) {
       return undefined;
@@ -62,14 +75,7 @@ export default function useTokenExchangeRate(
       return undefined;
     }
 
-    const contractExchangeRate =
-      contractExchangeRates[tokenAddress] || exchangeRates[tokenAddress];
-
     if (!contractExchangeRate) {
-      setExchangeRates((prev) => ({
-        ...prev,
-        [tokenAddress]: LOADING,
-      }));
       fetchTokenExchangeRates(nativeCurrency, [tokenAddress], chainId)
         .then((addressToExchangeRate) => {
           setExchangeRates((prev) => ({
@@ -95,6 +101,6 @@ export default function useTokenExchangeRate(
     nativeCurrency,
     tokenAddress,
     selectedNativeConversionRate,
-    contractExchangeRates,
+    contractExchangeRate,
   ]);
 }

ui/components/app/qr-hardware-popover/base-reader.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import log from 'loglevel';
 import { URDecoder } from '@ngraveio/bc-ur';
 import PropTypes from 'prop-types';
@@ -30,7 +30,7 @@ const BaseReader = ({
   const [urDecoder, setURDecoder] = useState(new URDecoder());
   const [progress, setProgress] = useState(0);
 
-  let permissionChecker = null;
+  const permissionCheckerRef = useRef(null);
   const mounted = useRef(false);
 
   const reset = () => {
@@ -40,29 +40,7 @@ const BaseReader = ({
     setProgress(0);
   };
 
-  const checkEnvironment = async () => {
-    try {
-      const { environmentReady } = await WebcamUtils.checkStatus();
-      if (
-        !environmentReady &&
-        getEnvironmentType() !== ENVIRONMENT_TYPE_FULLSCREEN
-      ) {
-        const currentUrl = new URL(window.location.href);
-        const currentHash = currentUrl.hash;
-        const currentRoute = currentHash ? currentHash.substring(1) : null;
-        global.platform.openExtensionInBrowser(currentRoute);
-      }
-    } catch (e) {
-      if (mounted.current) {
-        setError(e);
-      }
-    }
-    // initial attempt is required to trigger permission prompt
-    // eslint-disable-next-line no-use-before-define
-    return initCamera();
-  };
-
-  const checkPermissions = async () => {
+  const checkPermissions = useCallback(async () => {
     try {
       const { permissions } = await WebcamUtils.checkStatus();
       if (permissions) {
@@ -74,15 +52,52 @@ const BaseReader = ({
         setReady(READY_STATE.READY);
       } else if (mounted.current) {
         // Keep checking for permissions
-        permissionChecker = setTimeout(checkPermissions, SECOND);
+        permissionCheckerRef.current = setTimeout(checkPermissions, SECOND);
         setReady(READY_STATE.NEED_TO_ALLOW_ACCESS);
       }
     } catch (e) {
       if (mounted.current) {
         setError(e);
       }
     }
-  };
+  }, []);
+
+  const initCamera = useCallback(() => {
+    try {
+      checkPermissions();
+    } catch (e) {
+      if (!mounted.current) {
+        return;
+      }
+      if (e.name === 'NotAllowedError') {
+        log.info(`Permission denied: '${e}'`);
+        setReady(READY_STATE.NEED_TO_ALLOW_ACCESS);
+      } else {
+        setError(e);
+      }
+    }
+  }, [checkPermissions]);
+
+  const checkEnvironment = useCallback(async () => {
+    try {
+      const { environmentReady } = await WebcamUtils.checkStatus();
+      if (
+        !environmentReady &&
+        getEnvironmentType() !== ENVIRONMENT_TYPE_FULLSCREEN
+      ) {
+        const currentUrl = new URL(window.location.href);
+        const currentHash = currentUrl.hash;
+        const currentRoute = currentHash ? currentHash.substring(1) : null;
+        global.platform.openExtensionInBrowser(currentRoute);
+      }
+    } catch (e) {
+      if (mounted.current) {
+        setError(e);
+      }
+    }
+    // initial attempt is required to trigger permission prompt
+    return initCamera();
+  }, [initCamera]);
 
   const handleScan = (data) => {
     try {
@@ -105,30 +120,14 @@ const BaseReader = ({
     }
   };
 
-  const initCamera = () => {
-    try {
-      checkPermissions();
-    } catch (e) {
-      if (!mounted.current) {
-        return;
-      }
-      if (e.name === 'NotAllowedError') {
-        log.info(`Permission denied: '${e}'`);
-        setReady(READY_STATE.NEED_TO_ALLOW_ACCESS);
-      } else {
-        setError(e);
-      }
-    }
-  };
-
   useEffect(() => {
     mounted.current = true;
     checkEnvironment();
     return () => {
       mounted.current = false;
-      clearTimeout(permissionChecker);
+      clearTimeout(permissionCheckerRef.current);
+      permissionCheckerRef.current = null;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -137,11 +136,10 @@ const BaseReader = ({
     } else if (ready === READY_STATE.NEED_TO_ALLOW_ACCESS) {
       checkPermissions();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ready]);
+  }, [ready, checkPermissions, initCamera]);
 
   const tryAgain = () => {
-    clearTimeout(permissionChecker);
+    clearTimeout(permissionCheckerRef.current);
     reset();
     checkEnvironment();
   };

ui/components/component-library/select-wrapper/select-wrapper.stories.tsx

@@ -172,8 +172,9 @@ UncontrolledValue.args = {
 };
 
 export const UseSelectContext: StoryFn<typeof SelectWrapper> = (args) => {
-  // Note that the SelectContext is being used inside a component, because the SelectContext needs to be called within the SelectWrapper component and not before
   const CustomClose = () => {
+    // Note that the SelectContext is being used inside a component, because the SelectContext needs to be called within the SelectWrapper component and not before
+    // eslint-disable-next-line react-compiler/react-compiler
     const { toggleUncontrolledOpen } = useSelectContext();
 
     return (

ui/components/component-library/text-field/text-field.tsx

@@ -93,6 +93,8 @@ export const TextField: TextFieldComponent = React.forwardRef(
       // Check if an external ref (inputRef) is provided and is a ref object
       if (inputRef && 'current' in inputRef) {
         // Assign the input element reference to the external ref
+        // TODO: Use `ref` prop instead. `forwardRef` is deprecated in React v19.
+        // eslint-disable-next-line react-compiler/react-compiler
         inputRef.current = inputElementRef;
       }
       // Check if an external ref (inputRef) is a callback function

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

@@ -1,4 +1,5 @@
 import { CaipAssetType, CaipChainId, Hex } from '@metamask/utils';
+import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { getUseExternalServices } from '../../../../../selectors';
 import {
@@ -25,6 +26,13 @@ export const useAssetMetadata = (
 ) => {
   const allowExternalServices = useSelector(getUseExternalServices);
 
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+      abortControllerRef.current = null;
+    };
+  }, [abortControllerRef]);
+
   const { value: assetMetadata } = useAsyncResult<
     | {
         address: Hex | CaipAssetType | string;
@@ -49,7 +57,7 @@ export const useAssetMetadata = (
       shouldFetchMetadata &&
       trimmedSearchQuery.length > 30
     ) {
-      abortControllerRef.current = new AbortController();
+      abortControllerRef.current ??= new AbortController();
       const metadata = await fetchAssetMetadata(
         trimmedSearchQuery,
         chainId,

ui/components/ui/deprecated-networks/deprecated-networks.js

@@ -76,11 +76,20 @@ export default function DeprecatedNetworks() {
         setIsClosed(true);
 
         const networkConfiguration = networkConfigurations[chainId];
-        networkConfiguration.rpcEndpoints[
-          networkConfiguration.defaultRpcEndpointIndex
-        ].url = 'https://mainnet.aurora.dev';
-
-        await dispatch(updateNetwork(networkConfiguration));
+        await dispatch(
+          updateNetwork({
+            ...networkConfiguration,
+            rpcEndpoints: {
+              ...networkConfiguration.rpcEndpoints,
+              [networkConfiguration.defaultRpcEndpointIndex]: {
+                ...networkConfiguration.rpcEndpoints[
+                  networkConfiguration.defaultRpcEndpointIndex
+                ],
+                url: 'https://mainnet.aurora.dev',
+              },
+            },
+          }),
+        );
       },
     };
   }

ui/components/ui/icon/preloader/preloader-icon.component.js

@@ -19,6 +19,7 @@ const Preloader = ({ className, size }) => (
     />
     <mask
       id="mask0"
+      // eslint-disable-next-line react/no-unknown-property
       mask-type="alpha"
       maskUnits="userSpaceOnUse"
       x="0"

ui/contexts/metametrics.js

@@ -206,6 +206,7 @@ export function MetaMetricsProvider({ children }) {
 
   // For backwards compatibility, attach the new methods as properties to trackEvent
   const trackEventWithMethods = trackEvent;
+  // eslint-disable-next-line react-compiler/react-compiler
   trackEventWithMethods.bufferedTrace = bufferedTrace;
   trackEventWithMethods.bufferedEndTrace = bufferedEndTrace;
   trackEventWithMethods.onboardingParentContext = onboardingParentContext;

ui/hooks/useAsync.ts

@@ -115,6 +115,7 @@ export function useAsyncCallback<T>(
         setResult(createErrorResult(error as Error));
       }
     }
+    // eslint-disable-next-line react-compiler/react-compiler
   }, deps);
 
   return [execute, result];