diff --git a/.eslintrc.js b/.eslintrc.js index 677ca3d98..3cc83ee1f 100644 --- a/.eslintrc.js +++ b/.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: [ diff --git a/package.json b/package.json index 1d27a3913..6199e332f 100644 --- a/package.json +++ b/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", diff --git a/test/unit/app/controllers/permissions/permissions-log-controller-test.js b/test/unit/app/controllers/permissions/permissions-log-controller-test.js index ea99fcd2d..fa2e32889 100644 --- a/test/unit/app/controllers/permissions/permissions-log-controller-test.js +++ b/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) } diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js index e22345916..bbeb777e8 100644 --- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js +++ b/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 ) : 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') } ) - }, [shouldShowSpeedUp, isPending, retryTransaction]) + }, [shouldShowSpeedUp, isUnapproved, t, isPending, retryTransaction]) return ( <> diff --git a/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js b/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js index 7ed0d00e1..ae75e5474 100644 --- a/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js +++ b/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 ( <> diff --git a/ui/app/components/ui/menu/menu.stories.js b/ui/app/components/ui/menu/menu.stories.js index ec8822d62..c3071c798 100644 --- a/ui/app/components/ui/menu/menu.stories.js +++ b/ui/app/components/ui/menu/menu.stories.js @@ -6,7 +6,7 @@ export default { title: 'Menu', } -export const basic = () => { +export const Basic = () => { return ( { ) } -export const anchored = () => { +export const Anchored = () => { const [anchorElement, setAnchorElement] = useState(null) return ( <> diff --git a/ui/app/hooks/useMetricEvent.js b/ui/app/hooks/useMetricEvent.js index 33ca751ec..a5a883b5f 100644 --- a/ui/app/hooks/useMetricEvent.js +++ b/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 } diff --git a/ui/app/hooks/useShouldShowSpeedUp.js b/ui/app/hooks/useShouldShowSpeedUp.js index d728f042c..437c6cba2 100644 --- a/ui/app/hooks/useShouldShowSpeedUp.js +++ b/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 } diff --git a/ui/app/hooks/useTokenTracker.js b/ui/app/hooks/useTokenTracker.js index e06ec8a55..406eade3f 100644 --- a/ui/app/hooks/useTokenTracker.js +++ b/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 } } diff --git a/yarn.lock b/yarn.lock index 941b24f9f..fc3b9f117 100644 --- a/yarn.lock +++ b/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"