exhaustive-deps: custom effects should support async functions

We have a custom hook, useAsyncEffect, which works like useEffect except it accepts an async function. We would like to check the deps of this function using exhaustive-deps, but that lint rule is going a bit beyond its name and also checking the type of function we pass.

The exhaustive-deps rule can’t know anything about the semantics of arbitrary third-party hooks, so I think it’s overstepping its bounds a bit (at least if you take the name “exhaustive deps” literally)

React version: 16.13.1 eslint version: 7.0.0 eslint-plugin-react-hooks version: 4.0.3

Steps To Reproduce

Source:

import React from 'react';
import { useAsyncEffect } from './utilities/react';

function MyComponent() {
  useAsyncEffect(async () => {
    await Promise.resolve()
  }, []);
  return <div />;
}

.eslintrc.json:

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": [
      "error",
      {
        "additionalHooks": "^useAsyncEffect$"
      }
    ]
  }
}

Then run:

node_modules/.bin/eslint --ext jsx src/file.jsx

The current behavior

  5:18  error  Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

<snip>

✖ 1 problem (1 error, 0 warnings)

The expected behavior

There should be no lint error

[Dawnthorn]

I wonder if it would make more sense to move the effect callbacks async check into a separate rule like react-hooks/async-use-effect? In this case we want to check the dependencies, but we don’t want the async check. If they were separate rules we could configure them separately.

[cgriebel]

The suggestion to split them into 2 rules I think is ideal. It also allows suppressing one without the other when needed. I’m forced to decide between suppressing the false positive and risk dependencies being missed or having a bunch of warnings as it currently stands.