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.

[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?