fix(linter/react): exhaustive-deps report longest dependency (#9891)

Where a hook has multiple overlapping dependencies, `react/exhaustive-deps` rule reports that overlap. e.g.:

```js
function Foo(props) {
    useCallback(() => {
        console.log(props.foo);
    }, [props, props.foo]);
    return <div />;
}
```

```
eslint-plugin-react(exhaustive-deps): React Hook useCallback has unnecessary dependency: props.foo
```

[eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) always reports the longest dependency (`props.foo` in above case). Whereas Oxlint would report either `props` or `props.foo` randomly - because the dependencies are stored in an `FxHashSet` which does not have a defined iteration order.

This PR fixes that so it always reports the longer dependency, aligning with the ESLint plugin.

Author: overlookmotel

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

@@ -525,7 +525,13 @@ impl Rule for ExhaustiveDeps {
             // for example if `props.foo`, AND `props.foo.bar.baz` was declared in the deps array
             // `props.foo.bar.baz` is unnecessary (already covered by `props.foo`)
             declared_dependencies.iter().tuple_combinations().for_each(|(a, b)| {
-                if a.contains(b) || b.contains(a) {
+                if a.contains(b) {
+                    ctx.diagnostic(unnecessary_dependency_diagnostic(
+                        hook_name,
+                        &a.to_string(),
+                        dependencies_node.span,
+                    ));
+                } else if b.contains(a) {
                     ctx.diagnostic(unnecessary_dependency_diagnostic(
                         hook_name,
                         &b.to_string(),
@@ -2362,6 +2368,13 @@ fn test() {
             console.log(props.bar);
           }, [props, props.foo]);
         }",
+        r"function MyComponent(props) {
+          const local = {};
+          useCallback(() => {
+            console.log(props.foo);
+            console.log(props.bar);
+          }, [props.foo, props]);
+        }",
         r"function MyComponent(props) {
           const local = {};
           useCallback(() => {

crates/oxc_linter/src/snapshots/react_exhaustive_deps.snap

@@ -514,7 +514,7 @@ source: crates/oxc_linter/src/tester.rs
    ╰────
   help: Extract the expression to a separate variable so it can be statically checked.
 
-  ⚠ eslint-plugin-react(exhaustive-deps): React Hook useCallback has unnecessary dependency: props
+  ⚠ eslint-plugin-react(exhaustive-deps): React Hook useCallback has unnecessary dependency: props.foo
    ╭─[exhaustive_deps.tsx:6:14]
  5 │             console.log(props.bar);
  6 │           }, [props, props.foo]);
@@ -523,6 +523,15 @@ source: crates/oxc_linter/src/tester.rs
    ╰────
   help: Either include it or remove the dependency array.
 
+  ⚠ eslint-plugin-react(exhaustive-deps): React Hook useCallback has unnecessary dependency: props.foo
+   ╭─[exhaustive_deps.tsx:6:14]
+ 5 │             console.log(props.bar);
+ 6 │           }, [props.foo, props]);
+   ·              ──────────────────
+ 7 │         }
+   ╰────
+  help: Either include it or remove the dependency array.
+
   ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useCallback has missing dependencies: 'props.foo', and 'props.bar'
    ╭─[exhaustive_deps.tsx:6:14]
  5 │             console.log(props.bar);
@@ -559,7 +568,7 @@ source: crates/oxc_linter/src/tester.rs
    ╰────
   help: Either include it or remove the dependency array.
 
-  ⚠ eslint-plugin-react(exhaustive-deps): React Hook useCallback has unnecessary dependency: local
+  ⚠ eslint-plugin-react(exhaustive-deps): React Hook useCallback has unnecessary dependency: local.id
    ╭─[exhaustive_deps.tsx:5:14]
  4 │             console.log(local);
  5 │           }, [local.id, local]);