fixed facebook#27335

Author: Shubhdeep12

packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

@@ -7738,6 +7738,18 @@ const testsTypescript = {
         }
       `,
     },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [foo, setFoo] = useState<{ bar: { b: number } }>({ bar: { b: 42 } });
+
+          useEffect(() => {
+              const square = (x: typeof foo.bar.b) => x * x;
+            setFoo((previous) => ({ ...previous, bar: { b: square(previous.bar.b) } }));
+          }, []);
+        }
+      `,
+    },
   ],
   invalid: [
     {
@@ -8091,6 +8103,40 @@ const testsTypescript = {
         },
       ],
     },
+    {
+      code: normalizeIndent`
+        function MyComponent() {
+          const [foo, setFoo] = useState<{ bar: { b: number } }>({ bar: { b: 42 } });
+
+          useEffect(() => {
+            const square = () => foo.bar.b * foo.bar.b;
+            setFoo((previous) => ({ ...previous, bar: { b: square() } }));
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'foo.bar.b'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [foo.bar.b]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const [foo, setFoo] = useState<{ bar: { b: number } }>({ bar: { b: 42 } });
+
+                  useEffect(() => {
+                    const square = () => foo.bar.b * foo.bar.b;
+                    setFoo((previous) => ({ ...previous, bar: { b: square() } }));
+                  }, [foo.bar.b]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
   ],
 };
 

packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js

@@ -87,6 +87,23 @@ export default {
         return result;
       };
     }
+    function checkTypeOfParent(dependencyNode) {
+      let currentNode = dependencyNode.parent;
+      let foundMatch = false;
+
+      while (currentNode) {
+        if (
+          currentNode.type === 'TSTypeQuery' ||
+          currentNode.type === 'TSTypeReference'
+        ) {
+          foundMatch = true;
+          break;
+        }
+        currentNode = currentNode.parent;
+      }
+
+      return foundMatch;
+    }
     /**
      * Visitor for both function expressions and arrow function expressions.
      */
@@ -431,10 +448,7 @@ export default {
             });
           }
 
-          if (
-            dependencyNode.parent.type === 'TSTypeQuery' ||
-            dependencyNode.parent.type === 'TSTypeReference'
-          ) {
+          if (checkTypeOfParent(dependencyNode)) {
             continue;
           }