Skip to content

Comments

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

Merged
graphite-app[bot] merged 1 commit intomainfrom
03-19-fix_linter_react_exhaustive-deps_report_longest_dependency
Mar 20, 2025
Merged

fix(linter/react): exhaustive-deps report longest dependency#9891
graphite-app[bot] merged 1 commit intomainfrom
03-19-fix_linter_react_exhaustive-deps_report_longest_dependency

Conversation

@overlookmotel
Copy link
Member

@overlookmotel overlookmotel commented Mar 19, 2025

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

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 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.

Copy link
Member Author

overlookmotel commented Mar 19, 2025


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • 0-merge - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

@codspeed-hq
Copy link

codspeed-hq bot commented Mar 19, 2025

CodSpeed Performance Report

Merging #9891 will not alter performance

Comparing 03-19-fix_linter_react_exhaustive-deps_report_longest_dependency (2e023ab) with main (5f97f28)

Summary

✅ 33 untouched benchmarks

@overlookmotel overlookmotel marked this pull request as ready for review March 19, 2025 08:41
@Boshen Boshen requested a review from camc314 March 19, 2025 08:48
@graphite-app graphite-app bot changed the base branch from 03-19-feat_data_structures_add_assert_unchecked_macro to graphite-base/9891 March 19, 2025 08:51
@graphite-app graphite-app bot force-pushed the 03-19-fix_linter_react_exhaustive-deps_report_longest_dependency branch from 5730da9 to cb0e6b7 Compare March 19, 2025 09:03
@graphite-app graphite-app bot force-pushed the graphite-base/9891 branch from e1cd1a7 to 38ad787 Compare March 19, 2025 09:03
@graphite-app graphite-app bot changed the base branch from graphite-base/9891 to main March 19, 2025 09:04
@graphite-app graphite-app bot force-pushed the 03-19-fix_linter_react_exhaustive-deps_report_longest_dependency branch from cb0e6b7 to 61aba28 Compare March 19, 2025 09:04
@Boshen Boshen added the 0-merge Merge with Graphite Merge Queue label Mar 20, 2025
Copy link
Member

Boshen commented Mar 20, 2025

Merge activity

  • Mar 19, 9:02 PM EDT: The merge label '0-merge' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
  • Mar 19, 9:02 PM EDT: A user added this pull request to the Graphite merge queue.
  • Mar 19, 9:08 PM EDT: A user merged this pull request with the Graphite merge queue.

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.
@graphite-app graphite-app bot force-pushed the 03-19-fix_linter_react_exhaustive-deps_report_longest_dependency branch from 61aba28 to 2e023ab Compare March 20, 2025 01:03
@graphite-app graphite-app bot merged commit 2e023ab into main Mar 20, 2025
24 checks passed
@graphite-app graphite-app bot deleted the 03-19-fix_linter_react_exhaustive-deps_report_longest_dependency branch March 20, 2025 01:08
@graphite-app graphite-app bot removed the 0-merge Merge with Graphite Merge Queue label Mar 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-linter Area - Linter C-bug Category - Bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants