From bb2239dc90015ced86177adc522de568198e2edc Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 26 May 2020 16:08:50 +0100 Subject: [PATCH] Revert "Feature: Add support to `exhaustive-deps` rule for any hook ending with `Effect` (#18580)" (#19004) This reverts commit 5ac9ca72dfb73a06157bb177cd695f6b77fc900e. --- .../ESLintRuleExhaustiveDeps-test.js | 160 +----------------- .../src/ExhaustiveDeps.js | 4 +- 2 files changed, 8 insertions(+), 156 deletions(-) diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js index 55629537ed098..45474333a96db 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 d00044064563d..72fbf533c2fa9 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;