reference not add to dependencies if only its type is used as typeof …

…arg (#19316) * reference not add to dependencies if only its type is used as typeof arg * Add a few more tests
facebook · Jul 13, 2020 · 8447904 · 8447904
1 parent 26472c8
commit 8447904
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 0 deletions.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -6983,6 +6983,30 @@ const testsTypescript = {
         }
       `,
     },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [state, setState] = React.useState<number>(0);
+
+          useEffect(() => {
+            const someNumber: typeof state = 2;
+            setState(prevState => prevState + someNumber);
+          }, [])
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          const foo = {x: 1};
+          React.useEffect(() => {
+            const bar = {x: 2};
+            const baz = bar as typeof foo;
+            console.log(baz);
+          }, []);
+        }
+      `,
+    },
   ],
   invalid: [
     {
@@ -7016,6 +7040,40 @@ const testsTypescript = {
         },
       ],
     },
+    {
+      code: normalizeIndent`
+        function App() {
+          const foo = {x: 1};
+          const bar = {x: 2};
+          useEffect(() => {
+            const baz = bar as typeof foo;
+            console.log(baz);
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'bar'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [bar]',
+              output: normalizeIndent`
+                function App() {
+                  const foo = {x: 1};
+                  const bar = {x: 2};
+                  useEffect(() => {
+                    const baz = bar as typeof foo;
+                    console.log(baz);
+                  }, [bar]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
     {
       code: normalizeIndent`
         function MyComponent() {
@@ -7217,6 +7275,76 @@ const testsTypescript = {
         },
       ],
     },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [state, setState] = React.useState<number>(0);
+
+          useEffect(() => {
+            const someNumber: typeof state = 2;
+            setState(prevState => prevState + someNumber + state);
+          }, [])
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'state'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setState(s => ...)' ` +
+            `if you only need 'state' in the 'setState' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [state]',
+              output: normalizeIndent`
+              function MyComponent() {
+                const [state, setState] = React.useState<number>(0);
+
+                useEffect(() => {
+                  const someNumber: typeof state = 2;
+                  setState(prevState => prevState + someNumber + state);
+                }, [state])
+              }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [state, setState] = React.useState<number>(0);
+
+          useMemo(() => {
+            const someNumber: typeof state = 2;
+            console.log(someNumber);
+          }, [state])
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useMemo has an unnecessary dependency: 'state'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const [state, setState] = React.useState<number>(0);
+
+                  useMemo(() => {
+                    const someNumber: typeof state = 2;
+                    console.log(someNumber);
+                  }, [])
+                }
+                `,
+            },
+          ],
+        },
+      ],
+    },
   ],
 };
 

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -543,6 +543,10 @@ export default {
             });
           }
 
+          if (dependencyNode.parent.type === 'TSTypeQuery') {
+            continue;
+          }
+
           const def = reference.resolved.defs[0];
           if (def == null) {
             continue;