[eslint-plugin-react-hooks] async functions should be allowed for custom effects

Consider the following code:

useAsyncEffect(async () => {
  await foo()
}, []);

Eslint give the following error:

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

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

There are 2 problems with that:

1. The error is provided by react-hooks/exhaustive-deps, but this has nothing to do with deps or exhaustiveness. I can’t disable this warning without disable actually checking for exhaustive deps.
2. In general the error is bogus. Statement “Effect callbacks are synchronous to prevent race conditions” is only true for built-in effects, and is definitely not true for useAsyncEffect, which built specifically to support asynchronous callbacks.

eslint-plugin-react-hooks version: 4.0.0

The current behavior

react-hooks/exhaustive-deps gives an error for this code

The expected behavior

react-hooks/exhaustive-deps should not give an error for this code

[vkurchatkin]

An Effect has a specific shape and meaning in React, so maybe co-opting it might not be the right move.

Technically, I could, I’ve thought of that. But useAsyncEffect is the obvious name for what it does. I don’t want to choose objectively worse name because of a linter rule.

[threepointone]

https://github.com/facebook/react/blob/master/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js#L104 is where the check happens.

iiuc, this is to allow passing back a cleanup/cancel function, which is much harder with your abstraction. I hope you’ve considered those ramifications and have your own workarounds.

I dunno whether the team will change the regex, would be interested to hear from them.