vscode useExhaustiveDependencies errors does not have Quick Fix

[oddball]

I have been checking if biome can replace eslint and prettier for me.

Ran into 3 issues that for me are showstoppers:

•  1. When having a useEffect with incorrect dependencies, the only QuickFix available in vscode is "Suppress rule lint/correctness/useExhaustiveDependencies", when what I want is an option to calculate what the dependencies should be, and set it. Is that not possible? It is unreasonable to hand code the dependency lists. I have many hundreds of useEffects
•  2. I have a number of "This hook specifies a dependency more specific that its captures", and I cannot turn that off without turning the "lint/correctness/useExhaustiveDependencies" off.
•  3. I got a number of "This hook does not specify all of its dependencies", when the useEffect, actually do that. Typically "value" is in the dependency list, but the hook uses "value.whatever". And again, I can not turn it off, without turning the "lint/correctness/useExhaustiveDependencies" off.

Any suggestions would be most appreciated!

[arendjr]

what I want is an option to calculate what the dependencies should be, and set it. Is that not possible?

I don’t think we currently support that, no. We could implement it, but it would always be an unsafe fix only, because there are many situations why people sometimes intentionally deviate from the expected list of dependencies.

It is unreasonable to hand code the dependency lists. I have many hundreds of useEffects

Just to verify, are those all your useEffect() usages, or only the ones that need fixing? How did you handle it previously with ESLint? Assuming the other issues get fixed, I would expect you only need to update the suppression comments, no?

I have a number of "This hook specifies a dependency more specific that its captures", and I cannot turn that off without turning the "lint/correctness/useExhaustiveDependencies" off.

Do you have an example of this one?

I got a number of "This hook does not specify all of its dependencies", when the useEffect, actually do that. Typically "value" is in the dependency list, but the hook uses "value.whatever". And again, I can not turn it off, without turning the "lint/correctness/useExhaustiveDependencies" off.

It sounds like a bug, but do you have an example of some code that triggers this? It might be best to create an issue for it.

[rfdrake27]

what I want is an option to calculate what the dependencies should be, and set it. Is that not possible?

I don’t think we currently support that, no. We could implement it, but it would always be an unsafe fix only, because there are many situations why people sometimes intentionally deviate from the expected list of dependencies.

Just chiming in to say that issue 1 of the original post was the singular reason why I turned off Biome linting and went back to ESLint. I understand but disagree with your reasoning here. In the spirit of linting, it makes sense that the linter would try to enforce the complete dependency list with the Quick Fix. In the vast majority of cases that is what should be done. There are rare times you do have to omit a dependency, but adding the comment to disable the rule for that line is, in my opinion, the exact level of "are you sure there is no better way to do this?" reminder for bypassing the warning. The other 99% of the time, Biome's lack of the Quick Fix functionality for React deps is a major hit to productivity.

[ematipico]

I believe you both are saying the same thing in a different way.

We will gladly accept a PR to add this feature. Some help would be very welcome, as we are currently swamped on other fronts.

[oddball]

1 . It is implemented in ESLint( could possible be prettier). And for me, one of the features I cannot live without. In my case, I never calculate the dependency list myself. I would assume, that if I ever want to deviate from a complete list, then I would ignore just that line.

I got hundreds of dependency lists that needs fixing (according to biome). I dont think it is true, cause those are not hand written by me, they are calculated by ESLint(could possible be prettier).

2. I am not sure its a good example, but the first one I found.

  useEffect(() => {
    if (previousFormData && formData[dateName] !== previousFormData[dateName]) {
      const newQueryArgs = { ...queryArgs };
      newQueryArgs[dateName] = formData[dateName];
      navigate(location.pathname + "?" + queryString.stringify(newQueryArgs));
    } else if (queryArgs && dateName in queryArgs && formData[dateName] !== queryArgs[dateName]) {
      const change: any = {};
      change[dateName] = queryArgs[dateName];
      setFormData(change);
    }
  }, [dateName, previousFormData, formData, queryArgs, navigate, location]);

⚠ This hook specifies a dependency more specific that its captures: location

  35 │   const { queryArgs } = useQueryArgs();
  36 │
> 37 │   useEffect(() => {
     │   ^^^^^^^^^
  38 │     if (previousFormData && formData[dateName] !== previousFormData[dateName]) {
  39 │       const newQueryArgs = { ...queryArgs };

ℹ This capture is more generic than...

  40 │       newQueryArgs[dateName] = formData[dateName];
  41 │       navigate(location.pathname + "?" + queryString.stringify(newQueryArgs));
> 42 │     } else if (queryArgs && dateName in queryArgs && formData[dateName] !== queryArgs[dateName]) {
     │                                                      ^^^^^^^^^^^^^^^^^^
  43 │       const change: any = {};
  44 │       change[dateName] = queryArgs[dateName];

ℹ ...this dependency.

  45 │       setFormData(change);
  46 │     }
> 47 │   }, [dateName, previousFormData, formData, queryArgs, navigate, location]);
     │                                                                  ^^^^^^^^
  48 │
  49 │   return (

3. formData is in the list, therefor formData[dateName] should be covered.

  ⚠ This hook does not specify all of its dependencies: formData[dateName]

    35 │   const { queryArgs } = useQueryArgs();
    36 │
  > 37 │   useEffect(() => {
       │   ^^^^^^^^^
    38 │     if (previousFormData && formData[dateName] !== previousFormData[dateName]) {
    39 │       const newQueryArgs = { ...queryArgs };

  ℹ This dependency is not specified in the hook dependency list.

    40 │       newQueryArgs[dateName] = formData[dateName];
    41 │       navigate(location.pathname + "?" + queryString.stringify(newQueryArgs));
  > 42 │     } else if (queryArgs && dateName in queryArgs && formData[dateName] !== queryArgs[dateName]) {
       │                                                      ^^^^^^^^^^^^^^^^^^
    43 │       const change: any = {};
    44 │       change[dateName] = queryArgs[dateName];

[arendjr]

I also noticed there are actually some auto-fixes implemented too, though I'm not sure which version they were implemented... @oddball Now that 1.6 is out, could you mention which issues are still relevant?

[oddball]

@arendjr, I just checked with versions 1.6.1 and number 2 and 3 seems gone. Thanks. Still no autofix of useEffect dependencies though.

[ttdatt]

I'm a big fan of this vscode quick fix It would be fantastic if you could add it as a feature. If you're concerned about potential issues, it could be opt-in setting that users can enable if they want

[oddball]

@ttdatt, I would prefer if the dependency list was automatically calculated unless the statement had a "// biome-ignore lint/correctness/useExhaustiveDependencies: need here or something"

[jordangarcia]

I agree that this isn't the most correct of fixes and it's kind of a blanket statement to say every variable in this should be a dependency of the useEffect. However, I find this maybe the single must useful eslint rule and code action fix in practice. Most of the time a useEffect lint rule is invalid the solution is to add all of the dependencies to the array.

for me and my company unless this code fix is implemented we'll probably be holding off on making the switch over from eslint :/

[dangus21]

any updates on this issue?

[ematipico]

Please read the threads: #1928 (reply in thread)

[maciejgrzybek-ramp]

Any news here?

[ematipico]

Please read the threads: #1928 (reply in thread)

[ice-cap0]

yeah this is tablestakes today imo.
going back to ESLint for now.

[fireairforce]

So the remaining question is that quick fix of useExhaustiveDependencies doesn't work well?

[PerryFinn]

Yes, I just encountered this issue while trying to migrate eslint and prettier to biome. I rely heavily on the automatic fix for useEffect dependencies, which saves a lot of valuable time for more important tasks.

[PerryFinn]

By the way, I'd like to ask, will the value generated by useRef also be forcibly specified as a dependency? This does not give me such a prompt when using eslint.

Although it is possible to configure, I feel that having this rule by default might be more beginner-friendly.