Reduce false positive of eslint rule exhaustive-deps improving dependency analysis

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

@@ -7936,6 +7936,26 @@ const testsTypescript = {
         }
       `,
     },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            const { whatever } = props;
+            whatever();
+          }, [props.whatever]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            const { whatever: foo, something } = props;
+            console.log(foo, something);
+          }, [props.whatever, props.something]);
+        }
+      `,
+    },
   ],
   invalid: [
     {
@@ -8361,6 +8381,36 @@ const testsTypescript = {
         },
       ],
     },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            const { whatever: foo, something } = props;
+            console.log(foo, something);
+          }, [props.something]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.whatever'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.something, props.whatever]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    const { whatever: foo, something } = props;
+                    console.log(foo, something);
+                  }, [props.something, props.whatever]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
   ],
 };
 

packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts

@@ -9,12 +9,14 @@ import type {Rule, Scope} from 'eslint';
 import type {
   ArrayExpression,
   ArrowFunctionExpression,
+  AssignmentProperty,
   CallExpression,
   Expression,
   FunctionDeclaration,
   FunctionExpression,
   Identifier,
   Node,
+  ObjectPattern,
   Pattern,
   PrivateIdentifier,
   Super,
@@ -564,19 +566,30 @@ const rule = {
             continue;
           }
 
-          // Add the dependency to a map so we can make sure it is referenced
-          // again in our dependencies array. Remember whether it's stable.
-          if (!dependencies.has(dependency)) {
-            const resolved = reference.resolved;
-            const isStable =
-              memoizedIsStableKnownHookValue(resolved) ||
-              memoizedIsFunctionWithoutCapturedValues(resolved);
-            dependencies.set(dependency, {
-              isStable,
-              references: [reference],
-            });
-          } else {
-            dependencies.get(dependency)?.references.push(reference);
+          const pattern = destructuredPattern(dependencyNode);
+          const deps = pattern == null ?
+            [dependency] :
+            pattern.properties
+              .filter((prop): prop is AssignmentProperty => prop.type === 'Property')
+              .map((prop) => prop.key)
+              .filter(key => key.type === 'Identifier')
+              .map(key => `${dependency}.${key.name}`);
+
+          for (const dep of deps) {
+            // Add the dependency to a map so we can make sure it is referenced
+            // again in our dependencies array. Remember whether it's stable.
+            if (!dependencies.has(dep)) {
+              const resolved = reference.resolved;
+              const isStable =
+                memoizedIsStableKnownHookValue(resolved) ||
+                memoizedIsFunctionWithoutCapturedValues(resolved);
+              dependencies.set(dep, {
+                isStable,
+                references: [reference],
+              });
+            } else {
+              dependencies.get(dep)?.references.push(reference);
+            }
           }
         }
 
@@ -1847,11 +1860,15 @@ function scanForConstructions({
 }
 
 /**
- * Assuming () means the passed/returned node:
- * (props) => (props)
- * props.(foo) => (props.foo)
- * props.foo.(bar) => (props).foo.bar
- * props.foo.bar.(baz) => (props).foo.bar.baz
+ * Assuming {} means the passed/returned node and multiple "=>" means recursive calls:
+ * {props} => {props}
+ * {props}.foo => {props.foo}
+ * {props}.foo.bar.baz => {props.foo}.bar.baz => {props.foo.bar}.baz => {props.foo.bar.baz}
+ * props.{foo} => props.{foo}
+ * props.foo.{bar} => props.foo.{bar}
+ * {ref}.current => {ref}.current
+ * {props}.foo() => {props}.foo()
+ * {foo}.bar.baz=123 => {foo.bar}.baz=123
  */
 function getDependency(node: Node): Node {
   if (
@@ -2129,4 +2146,23 @@ function getUnknownDependenciesMessage(reactiveHookName: string): string {
   );
 }
 
+// Retruns ObjectPattern node if the node is destructured into a pattern.
+// Otherwise returns null.
+function destructuredPattern(
+  node: Node
+): ObjectPattern | null {
+  const { parent } = node;
+  if (!parent || parent.type !== 'VariableDeclarator') {
+    return null;
+  }
+  if (parent.init !== node) {
+    return null;
+  }
+  const { id } = parent;
+  if (id.type !== 'ObjectPattern') {
+    return null;
+  }
+  return id;
+}
+
 export default rule;