You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[ESLint] Disallow hooks in async functions (#27045)
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.
DiffTrain build for [7118f5d](7118f5d)
Copy file name to clipboardExpand all lines: compiled/facebook-www/eslint-plugin-react-hooks.js
+11-1Lines changed: 11 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -623,10 +623,20 @@ var RulesOfHooks = {
623
623
624
624
625
625
if(isDirectlyInsideComponentOrHook){
626
-
// Report an error if a hook does not reach all finalizing code
626
+
// Report an error if the hook is called inside an async function.
627
+
varisAsyncFunction=codePathNode.async;
628
+
629
+
if(isAsyncFunction){
630
+
context.report({
631
+
node: hook,
632
+
message: "React Hook \""+context.getSource(hook)+"\" cannot be "+'called in an async function.'
633
+
});
634
+
}// Report an error if a hook does not reach all finalizing code
627
635
// path segments.
628
636
//
629
637
// Special case when we think there might be an early return.
638
+
639
+
630
640
if(!cycled&&pathsFromStartToEnd!==allPathsFromStartToEnd&&!isUseIdentifier(hook)// `use(...)` can be called conditionally.
631
641
){
632
642
varmessage="React Hook \""+context.getSource(hook)+"\" is called "+'conditionally. React Hooks must be called in the exact '+'same order in every component render.'+(possiblyHasEarlyReturn ? ' Did you accidentally call a React Hook after an'+' early return?' : '');
0 commit comments