[ESLint] Disallow hooks in async functions

[acdlite]

Hooks cannot be called in async functions, on either the client or the server. This mistake sometimes happens when using Server Components, especially when refactoring a Server Component to a Client Component.

React logs a warning at runtime, but it's even better to catch this with a lint rule since it will show immediate inline feedback in the editor.

I added this to the existing "Rules of Hooks" ESLint rule.

[react-sizebot]

Comparing: 53ac219...bc484bd

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	164.35 kB	164.35 kB	=	51.76 kB	51.76 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	171.76 kB	171.76 kB	=	53.98 kB	53.98 kB
facebook-www/ReactDOM-prod.classic.js	=	567.22 kB	567.22 kB	=	100.04 kB	100.04 kB
facebook-www/ReactDOM-prod.modern.js	=	551.02 kB	551.02 kB	=	97.21 kB	97.21 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable-semver/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+0.44%	92.56 kB	92.97 kB	+0.33%	21.80 kB	21.87 kB
oss-stable/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+0.44%	92.56 kB	92.97 kB	+0.33%	21.80 kB	21.87 kB
oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js	+0.44%	92.78 kB	93.19 kB	+0.29%	21.83 kB	21.90 kB
oss-stable-semver/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.min.js	+0.41%	26.70 kB	26.81 kB	+0.23%	9.22 kB	9.24 kB
oss-stable/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.min.js	+0.41%	26.70 kB	26.81 kB	+0.23%	9.22 kB	9.24 kB
oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.production.min.js	+0.40%	27.40 kB	27.51 kB	+0.21%	9.42 kB	9.44 kB

Generated by 🚫 dangerJS against bc484bd

[kassens]

Oh, meant to also add 2 comments:

• There could be a related rule to disallow async hooks.
• Could the error link somewhere or explain what to do instead? I assume nesting a component with state inside or outside.

[acdlite]

There could be a related rule to disallow async hooks.

I thought about that but decided against it because it would give you get multiple lint warnings for essentially the same mistake: once for the whole function, and another per nested hook call.

The downside is that an async custom hook that contains no inner hooks (like below) won't trigger a lint error. But it will as soon as you do anything hook-y.

async function useSomething(bar) {
  return foo(bar);
}

Technically this won't cause any problems in the runtime so I think it's fine not to warn. Though I suppose if we had our own language we probably wouldn't allow it.

Could the error link somewhere or explain what to do instead? I assume nesting a component with state inside or outside.

Yeah we should have a link for each of these lint rules but I don't think we have this documented anywhere yet. Need to figure out what we're doing for canary docs.

[karlhorky]

@acdlite should the changelog also have an entry for this?