fix(js_analyze): mention which dependency the useExhaustiveDependencies fix adds to the list

.changeset/deep-women-retire.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#7813](https://github.com/biomejs/biome/issues/7813): improved the diagnostic of the rule [`useExhaustiveDependencies`](https://biomejs.dev/linter/rules/use-exhaustive-dependencies/). The diagnostic now shows the name of the variable to add to the dependency array.

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

@@ -1627,11 +1627,12 @@ impl Rule for UseExhaustiveDependencies {
 
         let message = match state {
             Fix::AddDependency {
-                captures: (_, captures),
+                captures,
                 dependencies_array,
                 ..
             } => {
-                let new_elements = captures.first().into_iter().filter_map(|node| {
+                let (capture_text, captures_range) = captures;
+                let new_elements = captures_range.first().into_iter().filter_map(|node| {
                     if let Some(jsx_ref) = JsxReferenceIdentifier::cast_ref(node) {
                         return Some(AnyJsArrayElement::AnyJsExpression(
                             make::js_identifier_expression(make::js_reference_identifier(
@@ -1662,7 +1663,7 @@ impl Rule for UseExhaustiveDependencies {
                     recreate_array(dependencies_array, elements),
                 );
 
-                markup! { "Add the missing dependency to the list." }
+                markup! { "Add the missing dependency "<Emphasis>{capture_text.as_ref()}</Emphasis>" to the list." }
             }
             Fix::RemoveDependency {
                 dependencies,

crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/customHook.ts.snap

@@ -111,7 +111,7 @@ customHook.ts:14:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency a to the list.
 
     16 │ ····},·[a]);
        │         +   
@@ -200,7 +200,7 @@ customHook.ts:46:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
     Failing to specify dependencies can result in Effects not updating correctly when state changes.
     These "stale closures" are a common source of surprising bugs.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency a to the list.
 
     46 │ ····useEvenMoreEffect([],·["foo",·a],·()·=>·{
        │                                 +++          
@@ -232,7 +232,7 @@ customHook.ts:46:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
     Failing to specify dependencies can result in Effects not updating correctly when state changes.
     These "stale closures" are a common source of surprising bugs.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency b to the list.
 
     46 │ ····useEvenMoreEffect([],·["foo",·b],·()·=>·{
        │                                 +++          
@@ -348,7 +348,7 @@ customHook.ts:61:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency a to the list.
 
     61 │ ····doSomething([a],·"apple",·()·=>·{
        │                  +                   
@@ -382,7 +382,7 @@ customHook.ts:61:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency b to the list.
 
     61 │ ····doSomething([b],·"apple",·()·=>·{
        │                  +                   
@@ -414,7 +414,7 @@ customHook.ts:64:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
     Failing to specify dependencies can result in Effects not updating correctly when state changes.
     These "stale closures" are a common source of surprising bugs.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency a to the list.
 
     64 │ ····doSomething(["a·b",·a],·[a],·()·=>·{
        │                       +++               

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

@@ -210,7 +210,7 @@ extraDependenciesInvalid.js:28:3 lint/correctness/useExhaustiveDependencies  FIX
     Failing to specify dependencies can result in Effects not updating correctly when state changes.
     These "stale closures" are a common source of surprising bugs.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency someObj to the list.
 
     30 │ ··},·[someObj.id,·someObj]);
        │                 +++++++++   

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

@@ -55,7 +55,7 @@ ignoredDependencies.js:8:5 lint/correctness/useExhaustiveDependencies  FIXABLE
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency a to the list.
 
     10 │ ····},·[a]);
        │         +   

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

@@ -61,7 +61,7 @@ issue1931.js:9:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency calc to the list.
 
     13 │ ····},·[calc]);
        │         ++++   
@@ -95,7 +95,7 @@ issue1931.js:21:19 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency calc to the list.
 
     25 │ ····},·[calc]);
        │         ++++   

crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/issue3080.ts.snap

@@ -52,7 +52,7 @@ issue3080.ts:5:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency bar to the list.
 
     8 │ ····},·[bar]);
       │         +++   
@@ -86,7 +86,7 @@ issue3080.ts:5:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency foo to the list.
 
     8 │ ····},·[foo]);
       │         +++   
@@ -119,7 +119,7 @@ issue3080.ts:16:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency bar to the list.
 
     16 │ ····useEffect(myEffect,·[bar]);
        │                          +++   
@@ -151,7 +151,7 @@ issue3080.ts:16:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency foo to the list.
 
     16 │ ····useEffect(myEffect,·[foo]);
        │                          +++   

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

@@ -108,7 +108,7 @@ issue3512.js:18:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
     Failing to specify dependencies can result in Effects not updating correctly when state changes.
     These "stale closures" are a common source of surprising bugs.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency y to the list.
 
     20 │ ····},·[x,·y]);
        │          +++   

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

@@ -63,7 +63,7 @@ issue5914.js:14:16 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency varA to the list.
 
     14 │ ········varB·=·useMemo(()·=>·varA,·[varA])
        │                                     ++++  
@@ -97,7 +97,7 @@ issue5914.js:26:18 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency varA to the list.
 
     26 │ ····const·varB·=·useMemo(()·=>·varA,·[varA]);
        │                                       ++++   

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

@@ -51,7 +51,7 @@ issue6278.js:4:8 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency myFn to the list.
 
     7 │ → },·[myFn]);
       │       ++++   

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

@@ -42,7 +42,7 @@ issue6893.js:5:8 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency firstId to the list.
 
     7 │ → },·[firstId])
       │       +++++++  
@@ -75,7 +75,7 @@ issue6893.js:5:8 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency secondId to the list.
 
     7 │ → },·[secondId])
       │       ++++++++  

crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/issue7982.ts.snap

@@ -57,7 +57,7 @@ issue7982.ts:8:26 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency count to the list.
 
     10 │ ····},·[count]);
        │         +++++   
@@ -90,7 +90,7 @@ issue7982.ts:13:27 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency count to the list.
 
     17 │ ········[count],
        │          +++++  
@@ -123,7 +123,7 @@ issue7982.ts:20:35 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency count to the list.
 
     22 │ ····},·[count])·as·Function;
        │         +++++               

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

@@ -67,7 +67,7 @@ issue8427.js:6:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
     Failing to specify dependencies can result in Effects not updating correctly when state changes.
     These "stale closures" are a common source of surprising bugs.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency fe to the list.
 
     8 │ ····},·[id,·fe]);
       │           ++++   
@@ -99,7 +99,7 @@ issue8427.js:13:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
     Failing to specify dependencies can result in Effects not updating correctly when state changes.
     These "stale closures" are a common source of surprising bugs.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency fetchEntity to the list.
 
     15 │ ····},·[id,·fetchEntity])
        │           +++++++++++++  

crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/issue8802.ts.snap

@@ -55,7 +55,7 @@ issue8802.ts:17:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency props.value to the list.
 
     19 │ ····},·[props.value]);
        │         +++++++++++   

crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/issue8883.tsx.snap

@@ -54,7 +54,7 @@ issue8883.tsx:18:5 lint/correctness/useExhaustiveDependencies  FIXABLE  ━━
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency msg to the list.
 
     18 │ ····useEffect(()·=>·console.log(msg),·[msg]);·//·should·trigger·useExhaustiveDependencies
        │                                        +++                                               

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

@@ -55,7 +55,7 @@ issue8907Reassigned.js:8:3 lint/correctness/useExhaustiveDependencies  FIXABLE
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency setA to the list.
 
     10 │ ··},·[setA]);
        │       ++++   
@@ -88,7 +88,7 @@ issue8907Reassigned.js:18:3 lint/correctness/useExhaustiveDependencies  FIXABLE
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency b.current to the list.
 
     20 │ ··},·[b.current]);
        │       +++++++++   

crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/jsxDependencies.jsx.snap

@@ -62,7 +62,7 @@ jsxDependencies.jsx:8:22 lint/correctness/useExhaustiveDependencies  FIXABLE  
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency Sub to the list.
 
     8 │ ··const·renderItem·=·useCallback(()·=>·<Sub·/>,·[Sub·])
       │                                                  ++++  
@@ -94,7 +94,7 @@ jsxDependencies.jsx:28:22 lint/correctness/useExhaustiveDependencies  FIXABLE  
 
   i Either include it or remove the dependency array.
 
-  i Unsafe fix: Add the missing dependency to the list.
+  i Unsafe fix: Add the missing dependency LocalSub to the list.
 
     28 │ ····const·memoized·=·useCallback(()·=>·<LocalSub·/>,·[LocalSub·]);
        │                                                       +++++++++