fix(lint/useExhaustiveDependencies): correctly fix the dependency list from a shorthand object member (#7498)

Author: siketyan

.changeset/brave-camels-sin.md

@@ -0,0 +1,19 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#6893](https://github.com/biomejs/biome/issues/6893): The [`useExhaustiveDependencies`](https://biomejs.dev/linter/rules/use-exhaustive-dependencies/) rule now correctly adds a dependency that is captured in a shorthand object member. For example:
+
+```jsx
+useEffect(() => {
+  console.log({firstId, secondId});
+}, []);
+```
+
+is now correctly fixed to:
+
+```jsx
+useEffect(() => {
+  console.log({firstId, secondId});
+}, [firstId, secondId]);
+```

crates/biome_js_analyze/src/lint/correctness/use_exhaustive_dependencies.rs

@@ -1,29 +1,30 @@
 use std::collections::BTreeMap;
 
+use rustc_hash::{FxHashMap, FxHashSet};
+
 use biome_analyze::{FixKind, RuleSource};
 use biome_analyze::{Rule, RuleDiagnostic, RuleDomain, context::RuleContext, declare_lint_rule};
 use biome_console::markup;
 use biome_diagnostics::Severity;
 use biome_js_factory::make;
 use biome_js_semantic::{Capture, SemanticModel};
 use biome_js_syntax::{
-    AnyJsArrayElement, AnyJsExpression, AnyJsMemberExpression, JsArrayExpression, T, TsTypeofType,
+    AnyJsArrayElement, AnyJsExpression, AnyJsMemberExpression, JsArrayExpression,
+    JsReferenceIdentifier, T, TsTypeofType,
 };
 use biome_js_syntax::{
     JsCallExpression, JsSyntaxKind, JsSyntaxNode, JsVariableDeclaration, TextRange,
     binding_ext::AnyJsBindingDeclaration,
 };
 use biome_rowan::{AstNode, AstSeparatedList, BatchMutationExt, SyntaxNodeCast, TriviaPieceKind};
-use rustc_hash::{FxHashMap, FxHashSet};
+use biome_rule_options::use_exhaustive_dependencies::{
+    StableHookResult, UseExhaustiveDependenciesOptions,
+};
 
 use crate::JsRuleAction;
 use crate::react::hooks::*;
 use crate::services::semantic::Semantic;
 
-use biome_rule_options::use_exhaustive_dependencies::{
-    StableHookResult, UseExhaustiveDependenciesOptions,
-};
-
 declare_lint_rule! {
     /// Enforce all dependencies are correctly specified in a React hook.
     ///
@@ -1000,7 +1001,11 @@ impl Rule for UseExhaustiveDependencies {
             } => {
                 let new_elements = captures.first().into_iter().filter_map(|node| {
                     node.ancestors()
-                        .find_map(|node| node.cast::<AnyJsExpression>()?.trim_trivia())
+                        .find_map(|node| match JsReferenceIdentifier::cast_ref(&node) {
+                            Some(node) => Some(make::js_identifier_expression(node).into()),
+                            _ => node.cast::<AnyJsExpression>(),
+                        })
+                        .and_then(|node| node.trim_trivia())
                         .map(AnyJsArrayElement::AnyJsExpression)
                 });
 

crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/issue6893.js

@@ -0,0 +1,8 @@
+function App() {
+	const firstId = `${Math.random()}`
+	const secondId = `${Math.random()}`
+
+	React.useEffect(() => {
+		console.log({firstId, secondId})
+	}, [])
+}

crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/issue6893.js.snap

@@ -0,0 +1,75 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: issue6893.js
+---
+# Input
+```js
+function App() {
+	const firstId = `${Math.random()}`
+	const secondId = `${Math.random()}`
+
+	React.useEffect(() => {
+		console.log({firstId, secondId})
+	}, [])
+}
+
+```
+
+# Diagnostics
+```
+issue6893.js:5:8 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × This hook does not specify its dependency on firstId.
+  
+    3 │ 	const secondId = `${Math.random()}`
+    4 │ 
+  > 5 │ 	React.useEffect(() => {
+      │ 	      ^^^^^^^^^
+    6 │ 		console.log({firstId, secondId})
+    7 │ 	}, [])
+  
+  i This dependency is being used here, but is not specified in the hook dependency list.
+  
+    5 │ 	React.useEffect(() => {
+  > 6 │ 		console.log({firstId, secondId})
+      │ 		             ^^^^^^^
+    7 │ 	}, [])
+    8 │ }
+  
+  i Either include it or remove the dependency array.
+  
+  i Unsafe fix: Add the missing dependency to the list.
+  
+    7 │ → },·[firstId])
+      │       +++++++  
+
+```
+
+```
+issue6893.js:5:8 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × This hook does not specify its dependency on secondId.
+  
+    3 │ 	const secondId = `${Math.random()}`
+    4 │ 
+  > 5 │ 	React.useEffect(() => {
+      │ 	      ^^^^^^^^^
+    6 │ 		console.log({firstId, secondId})
+    7 │ 	}, [])
+  
+  i This dependency is being used here, but is not specified in the hook dependency list.
+  
+    5 │ 	React.useEffect(() => {
+  > 6 │ 		console.log({firstId, secondId})
+      │ 		                      ^^^^^^^^
+    7 │ 	}, [])
+    8 │ }
+  
+  i Either include it or remove the dependency array.
+  
+  i Unsafe fix: Add the missing dependency to the list.
+  
+    7 │ → },·[secondId])
+      │       ++++++++  
+
+```