Adds the rule of hooks eslint rule (#8779)

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
     '@metamask/eslint-config/config/nodejs',
     '@metamask/eslint-config/config/mocha',
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
   ],
 
   plugins: [

package.json

@@ -223,6 +223,7 @@
     "eslint-plugin-json": "^1.2.0",
     "eslint-plugin-mocha": "^6.2.2",
     "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "fancy-log": "^1.3.3",
     "fast-glob": "^3.2.2",
     "file-loader": "^1.1.11",

test/unit/app/controllers/permissions/permissions-log-controller-test.js

@@ -58,6 +58,8 @@ const initMiddleware = (permLog) => {
 }
 
 const initClock = () => {
+  // useFakeTimers, is in fact, not a react-hook
+  // eslint-disable-next-line
   clock = useFakeTimers(1)
 }
 

ui/app/components/app/transaction-list-item/transaction-list-item.component.js

@@ -106,7 +106,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
       return
     }
     setShowDetails((prev) => !prev)
-  }, [isUnapproved, id])
+  }, [isUnapproved, history, id])
 
   const cancelButton = useMemo(() => {
     const cancelButton = (
@@ -131,7 +131,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
       </Tooltip>
     ) : cancelButton
 
-  }, [cancelEnabled, cancelTransaction, hasCancelled])
+  }, [isPending, t, isUnapproved, cancelEnabled, cancelTransaction, hasCancelled])
 
   const speedUpButton = useMemo(() => {
     if (!shouldShowSpeedUp || !isPending || isUnapproved) {
@@ -147,7 +147,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
         { t('speedUp') }
       </Button>
     )
-  }, [shouldShowSpeedUp, isPending, retryTransaction])
+  }, [shouldShowSpeedUp, isUnapproved, t, isPending, retryTransaction])
 
   return (
     <>

ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js

@@ -14,7 +14,7 @@ const BlockieIdenticon = ({ address, diameter }) => {
     if (updatedDataUrl !== dataUrl) {
       setDataUrl(updatedDataUrl)
     }
-  })
+  }, [dataUrl, address])
 
   return (
     <>

ui/app/components/ui/menu/menu.stories.js

@@ -6,7 +6,7 @@ export default {
   title: 'Menu',
 }
 
-export const basic = () => {
+export const Basic = () => {
   return (
     <Menu
       onHide={action('Hide')}
@@ -18,7 +18,7 @@ export const basic = () => {
   )
 }
 
-export const anchored = () => {
+export const Anchored = () => {
   const [anchorElement, setAnchorElement] = useState(null)
   return (
     <>

ui/app/hooks/useMetricEvent.js

@@ -4,6 +4,6 @@ import { MetaMetricsContext } from '../contexts/metametrics'
 
 export function useMetricEvent (config = {}, overrides = {}) {
   const metricsEvent = useContext(MetaMetricsContext)
-  const trackEvent = useCallback(() => metricsEvent(config, overrides), [config, overrides])
+  const trackEvent = useCallback(() => metricsEvent(config, overrides), [config, metricsEvent, overrides])
   return trackEvent
 }

ui/app/hooks/useShouldShowSpeedUp.js

@@ -40,7 +40,7 @@ export function useShouldShowSpeedUp (transactionGroup, isEarliestNonce) {
         clearTimeout(timeoutId)
       }
     }
-  }, [submittedTime, hasRetried, isEarliestNonce])
+  }, [submittedTime, speedUpEnabled, hasRetried, isEarliestNonce])
 
   return speedUpEnabled
 }

ui/app/hooks/useTokenTracker.js

@@ -82,7 +82,7 @@ export function useTokenTracker (tokens) {
     }
 
     buildTracker(userAddress, tokens)
-  }, [userAddress, network, tokens, updateBalances, buildTracker])
+  }, [userAddress, teardownTracker, network, tokens, updateBalances, buildTracker])
 
   return { loading, tokensWithBalances, error }
 }

yarn.lock

@@ -9758,6 +9758,11 @@ eslint-plugin-no-unsafe-innerhtml@1.0.16:
   dependencies:
     eslint "^3.7.1"
 
+eslint-plugin-react-hooks@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58"
+  integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA==
+
 eslint-plugin-react@^7.18.3:
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.18.3.tgz#8be671b7f6be095098e79d27ac32f9580f599bc8"