fix(linter): rules-of-hooks fix false positive with default export (#7570)

camc314 · camc314 · commit 4e3044e22533 · 2024-12-02T03:09:30.000Z
closes #7555
diff --git a/crates/oxc_linter/src/rules/react/rules_of_hooks.rs b/crates/oxc_linter/src/rules/react/rules_of_hooks.rs
@@ -172,13 +172,12 @@ impl Rule for RulesOfHooks {
             }) => {
                 let ident = get_declaration_identifier(nodes, parent_func.id());
 
-                // Hooks cannot be called inside of export default functions or used in a function
-                // declaration outside of a react component or hook.
+                // Hooks cannot be used in a function declaration outside of a react component or hook.
                 // For example these are invalid:
                 // const notAComponent = () => {
                 //    return () => {
                 //         useState();
-                //   }
+                //    }
                 // }
                 // --------------
                 // export default () => {
@@ -192,9 +191,7 @@ impl Rule for RulesOfHooks {
                 //         useState(0);
                 //     }
                 // }
-                if ident.is_some_and(|name| !is_react_component_or_hook_name(&name))
-                    || is_export_default(nodes, parent_func.id())
-                {
+                if ident.is_some_and(|name| !is_react_component_or_hook_name(&name)) {
                     return ctx.diagnostic(diagnostics::function_error(
                         *span,
                         hook_name,
@@ -400,14 +397,6 @@ fn get_declaration_identifier<'a>(
     })
 }
 
-fn is_export_default<'a>(nodes: &'a AstNodes<'a>, node_id: NodeId) -> bool {
-    nodes
-        .ancestor_ids(node_id)
-        .map(|id| nodes.get_node(id))
-        .nth(1)
-        .is_some_and(|node| matches!(node.kind(), AstKind::ExportDefaultDeclaration(_)))
-}
-
 /// # Panics
 /// `node_id` should always point to a valid `Function`.
 fn is_memo_or_forward_ref_callback(nodes: &AstNodes, node_id: NodeId) -> bool {
@@ -916,6 +905,16 @@ fn test() {
                 });
             });
     ",
+    "export default function App() {
+       const [state, setState] = useState(0);
+
+       useEffect(() => {
+         console.log('Effect called');
+       }, []);
+
+       return <div>{state}</div>;
+    }
+    "
     ];
 
     let fail = vec![
diff --git a/crates/oxc_linter/src/snapshots/react_rules_of_hooks.snap b/crates/oxc_linter/src/snapshots/react_rules_of_hooks.snap
@@ -668,24 +668,18 @@ source: crates/oxc_linter/src/tester.rs
  5 │             
    ╰────
 
-  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useState" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".
-   ╭─[rules_of_hooks.tsx:2:28]
- 1 │     
- 2 │ ╭─▶             export default () => {
- 3 │ │                   if (isVal) {
- 4 │ │                       useState(0);
- 5 │ │                   }
- 6 │ ╰─▶             }
- 7 │             
+  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.
+   ╭─[rules_of_hooks.tsx:4:21]
+ 3 │                 if (isVal) {
+ 4 │                     useState(0);
+   ·                     ───────────
+ 5 │                 }
    ╰────
 
-  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useState" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".
-   ╭─[rules_of_hooks.tsx:2:28]
- 1 │     
- 2 │ ╭─▶             export default function() {
- 3 │ │                   if (isVal) {
- 4 │ │                       useState(0);
- 5 │ │                   }
- 6 │ ╰─▶             }
- 7 │             
+  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.
+   ╭─[rules_of_hooks.tsx:4:21]
+ 3 │                 if (isVal) {
+ 4 │                     useState(0);
+   ·                     ───────────
+ 5 │                 }
    ╰────
