fix(linter/react-hooks): fix diagnostic message for literal in dependency array

Author: camc314

crates/oxc_linter/src/rules/react/exhaustive_deps.rs

@@ -119,6 +119,13 @@ fn dependency_array_not_array_literal_diagnostic(hook_name: &str, span: Span) ->
     .with_error_code_scope(SCOPE)
 }
 
+fn literal_in_dependency_array_diagnostic(span: Span) -> OxcDiagnostic {
+    OxcDiagnostic::warn("The literal is not a valid dependency because it never changes.")
+        .with_label(span)
+        .with_help("Remove the literal from the array.")
+        .with_error_code_scope(SCOPE)
+}
+
 fn duplicate_dependency_diagnostic(span: Span) -> OxcDiagnostic {
     OxcDiagnostic::warn("This dependency is specified more than once in the dependency array.")
         .with_label(span)
@@ -530,13 +537,15 @@ impl Rule for ExhaustiveDeps {
 
                     if let Ok(dep) = analyze_property_chain(elem, ctx) {
                         dep
+                    } else if elem.is_literal() {
+                        ctx.diagnostic(literal_in_dependency_array_diagnostic(elem.span()));
                     } else {
                         ctx.diagnostic(complex_expression_in_dependency_array_diagnostic(
                             hook_name.as_str(),
                             elem.span(),
                         ));
-                        None
                     }
+                    None
                 }
             });
 

crates/oxc_linter/src/snapshots/react_exhaustive_deps.snap

@@ -420,32 +420,32 @@ source: crates/oxc_linter/src/tester.rs
    ╰────
   help: Either include it or remove the dependency array.
 
-  ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has a complex expression in the dependency array.
+  ⚠ eslint-plugin-react-hooks(exhaustive-deps): The literal is not a valid dependency because it never changes.
    ╭─[exhaustive_deps.tsx:2:32]
  1 │ function MyComponent() {
  2 │           useEffect(() => {}, ['foo']);
    ·                                ─────
  3 │         }
    ╰────
-  help: Extract the expression to a separate variable so it can be statically checked.
+  help: Remove the literal from the array.
 
-  ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has a complex expression in the dependency array.
+  ⚠ eslint-plugin-react-hooks(exhaustive-deps): The literal is not a valid dependency because it never changes.
    ╭─[exhaustive_deps.tsx:4:15]
  3 │             console.log(foo, bar, baz);
  4 │           }, ['foo', 'bar']);
    ·               ─────
  5 │         }
    ╰────
-  help: Extract the expression to a separate variable so it can be statically checked.
+  help: Remove the literal from the array.
 
-  ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has a complex expression in the dependency array.
+  ⚠ eslint-plugin-react-hooks(exhaustive-deps): The literal is not a valid dependency because it never changes.
    ╭─[exhaustive_deps.tsx:4:22]
  3 │             console.log(foo, bar, baz);
  4 │           }, ['foo', 'bar']);
    ·                      ─────
  5 │         }
    ╰────
-  help: Extract the expression to a separate variable so it can be statically checked.
+  help: Remove the literal from the array.
 
   ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has missing dependencies: 'bar', 'foo', and 'baz'
    ╭─[exhaustive_deps.tsx:4:14]
@@ -458,32 +458,32 @@ source: crates/oxc_linter/src/tester.rs
    ╰────
   help: Either include it or remove the dependency array.
 
-  ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has a complex expression in the dependency array.
+  ⚠ eslint-plugin-react-hooks(exhaustive-deps): The literal is not a valid dependency because it never changes.
    ╭─[exhaustive_deps.tsx:4:15]
  3 │             console.log(foo, bar, baz);
  4 │           }, [42, false, null]);
    ·               ──
  5 │         }
    ╰────
-  help: Extract the expression to a separate variable so it can be statically checked.
+  help: Remove the literal from the array.
 
-  ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has a complex expression in the dependency array.
+  ⚠ eslint-plugin-react-hooks(exhaustive-deps): The literal is not a valid dependency because it never changes.
    ╭─[exhaustive_deps.tsx:4:19]
  3 │             console.log(foo, bar, baz);
  4 │           }, [42, false, null]);
    ·                   ─────
  5 │         }
    ╰────
-  help: Extract the expression to a separate variable so it can be statically checked.
+  help: Remove the literal from the array.
 
-  ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has a complex expression in the dependency array.
+  ⚠ eslint-plugin-react-hooks(exhaustive-deps): The literal is not a valid dependency because it never changes.
    ╭─[exhaustive_deps.tsx:4:26]
  3 │             console.log(foo, bar, baz);
  4 │           }, [42, false, null]);
    ·                          ────
  5 │         }
    ╰────
-  help: Extract the expression to a separate variable so it can be statically checked.
+  help: Remove the literal from the array.
 
   ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useEffect has missing dependencies: 'bar', 'foo', and 'baz'
    ╭─[exhaustive_deps.tsx:4:14]