-
Notifications
You must be signed in to change notification settings - Fork 47.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: eslint-plugin-react-hooks disallows the use of useId in async component even though it works #31187
Comments
Had some further discussions internally.
No Hook can be called in |
I don't understand the logic for preventing any hooks that can run in a Server Component to be called in An explanation would be welcome, I might have missed something here. |
The i18next web page recommends following the guidelines in this blog post which recommends introducing an async /CC @adrai |
@DamienCassou The useTranslation hook on server side you are mentioning is not really a hook, it only has the same name as the hook on client side... theoretically you can name that async function whatever you like: So instead of: export async function useTranslation(lng, ns, options = {}) {
const i18nextInstance = await initI18next(lng, ns)
return {
t: i18nextInstance.getFixedT(lng, Array.isArray(ns) ? ns[0] : ns, options.keyPrefix),
i18n: i18nextInstance
}
} export async function getTAndI18n(lng, ns, options = {}) {
const i18nextInstance = await initI18next(lng, ns)
return {
t: i18nextInstance.getFixedT(lng, Array.isArray(ns) ? ns[0] : ns, options.keyPrefix),
i18n: i18nextInstance
}
}
|
Thank you! |
The implementation doesn't support this in a safe way at the moment. |
In #27045 the
eslint-plugin-react-hooks
has been modified to disallow the use of any hooks inasync
components, 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
useId
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.
Footnotes
The documentation for React 19 does not mention it as well. ↩
The text was updated successfully, but these errors were encountered: