In #27045 the eslint-plugin-react-hooks has been modified to disallow the use of any hooks in async components, justified by this sentence:
Hooks cannot be called in async functions, on either the client or the server.
However, some hooks can be called in async components, namely useId. Or at least the documentation does not mention it1.
React version: 18.3.1
eslint-plugin-react-hooks: 5.0.0
Steps To Reproduce
- Create an async component that uses
useId
export default async function Component() {
const id = useId();
return null;
}
- ESLint will throw the following error:
Error: React Hook "useId" cannot be called in an async function. react-hooks/rules-of-hooks
The current behavior
ESLint throws an error when an async component uses useId.
The expected behavior
No ESLint error.
In #27045 the
eslint-plugin-react-hookshas been modified to disallow the use of any hooks inasynccomponents, justified by this sentence:However, some hooks can be called in async components, namely
useId. Or at least the documentation does not mention it1.React version: 18.3.1
eslint-plugin-react-hooks: 5.0.0
Steps To Reproduce
useIdError: React Hook "useId" cannot be called in an async function. react-hooks/rules-of-hooksThe current behavior
ESLint throws an error when an async component uses
useId.The expected behavior
No ESLint error.
Footnotes
The documentation for React 19 does not mention it as well. ↩