diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js index 55629537ed09..45474333a96d 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js @@ -360,50 +360,32 @@ const tests = { { code: normalizeIndent` function MyComponent(props) { - useCustomHook(() => { + useCustomEffect(() => { console.log(props.foo); }); } `, - options: [{additionalHooks: 'useCustomHook'}], - }, - { - code: normalizeIndent` - function MyComponent(props) { - useCustomHook(() => { - console.log(props.foo); - }, [props.foo]); - } - `, - options: [{additionalHooks: 'useCustomHook'}], - }, - { - code: normalizeIndent` - function MyComponent(props) { - useCustomHook(() => { - console.log(props.foo); - }, []); - } - `, - options: [{additionalHooks: 'useAnotherHook'}], + options: [{additionalHooks: 'useCustomEffect'}], }, { code: normalizeIndent` function MyComponent(props) { useCustomEffect(() => { console.log(props.foo); - }); + }, [props.foo]); } `, + options: [{additionalHooks: 'useCustomEffect'}], }, { code: normalizeIndent` function MyComponent(props) { useCustomEffect(() => { console.log(props.foo); - }, [props.foo]); + }, []); } `, + options: [{additionalHooks: 'useAnotherEffect'}], }, { code: normalizeIndent` @@ -3070,105 +3052,6 @@ const tests = { }, ], }, - { - code: normalizeIndent` - function MyComponent(props) { - useCustomHook(() => { - console.log(props.foo); - }, []); - useEffect(() => { - console.log(props.foo); - }, []); - React.useEffect(() => { - console.log(props.foo); - }, []); - React.useCustomHook(() => { - console.log(props.foo); - }, []); - } - `, - options: [{additionalHooks: 'useCustomHook'}], - errors: [ - { - message: - "React Hook useCustomHook has a missing dependency: 'props.foo'. " + - 'Either include it or remove the dependency array.', - suggestions: [ - { - desc: 'Update the dependencies array to be: [props.foo]', - output: normalizeIndent` - function MyComponent(props) { - useCustomHook(() => { - console.log(props.foo); - }, [props.foo]); - useEffect(() => { - console.log(props.foo); - }, []); - React.useEffect(() => { - console.log(props.foo); - }, []); - React.useCustomHook(() => { - console.log(props.foo); - }, []); - } - `, - }, - ], - }, - { - message: - "React Hook useEffect has a missing dependency: 'props.foo'. " + - 'Either include it or remove the dependency array.', - suggestions: [ - { - desc: 'Update the dependencies array to be: [props.foo]', - output: normalizeIndent` - function MyComponent(props) { - useCustomHook(() => { - console.log(props.foo); - }, []); - useEffect(() => { - console.log(props.foo); - }, [props.foo]); - React.useEffect(() => { - console.log(props.foo); - }, []); - React.useCustomHook(() => { - console.log(props.foo); - }, []); - } - `, - }, - ], - }, - { - message: - "React Hook React.useEffect has a missing dependency: 'props.foo'. " + - 'Either include it or remove the dependency array.', - suggestions: [ - { - desc: 'Update the dependencies array to be: [props.foo]', - output: normalizeIndent` - function MyComponent(props) { - useCustomHook(() => { - console.log(props.foo); - }, []); - useEffect(() => { - console.log(props.foo); - }, []); - React.useEffect(() => { - console.log(props.foo); - }, [props.foo]); - React.useCustomHook(() => { - console.log(props.foo); - }, []); - } - `, - }, - ], - }, - ], - }, { code: normalizeIndent` function MyComponent(props) { @@ -3186,6 +3069,7 @@ const tests = { }, []); } `, + options: [{additionalHooks: 'useCustomEffect'}], errors: [ { message: @@ -4220,36 +4104,6 @@ const tests = { ], options: [{additionalHooks: 'useLayoutEffect_SAFE_FOR_SSR'}], }, - { - code: ` - function MyComponent() { - const myRef = useRef(); - useIsomorphicLayoutEffect(() => { - const handleMove = () => {}; - myRef.current.addEventListener('mousemove', handleMove); - return () => myRef.current.removeEventListener('mousemove', handleMove); - }); - return
; - } - `, - output: ` - function MyComponent() { - const myRef = useRef(); - useIsomorphicLayoutEffect(() => { - const handleMove = () => {}; - myRef.current.addEventListener('mousemove', handleMove); - return () => myRef.current.removeEventListener('mousemove', handleMove); - }); - return
; - } - `, - errors: [ - `The ref value 'myRef.current' will likely have changed by the time ` + - `this effect cleanup function runs. If this ref points to a node ` + - `rendered by React, copy 'myRef.current' to a variable inside the effect, ` + - `and use that variable in the cleanup function.`, - ], - }, { // Autofix ignores constant primitives (leaving the ones that are there). code: normalizeIndent` diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js index d00044064563..72fbf533c2fa 100644 --- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js +++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js @@ -1510,9 +1510,7 @@ function getReactiveHookCallbackIndex(calleeNode, options) { // useImperativeHandle(ref, fn) return 1; default: - if (node === calleeNode && node.name.match(/^use.+Effect$/)) { - return 0; - } else if (node === calleeNode && options && options.additionalHooks) { + if (node === calleeNode && options && options.additionalHooks) { // Allow the user to provide a regular expression which enables the lint to // target custom reactive hooks. let name;