fix(linter): improve span diagnostic loc within react/rules-of-hooks (#11589)

camc314 · camc314 · commit 779727f4ca73 · 2025-06-10T14:05:36.000Z
closes #11587
diff --git a/crates/oxc_linter/src/rules/react/rules_of_hooks.rs b/crates/oxc_linter/src/rules/react/rules_of_hooks.rs
@@ -207,8 +207,8 @@ impl Rule for RulesOfHooks {
                 }
             }
             // Hooks can't be called from async function.
-            AstKind::Function(Function { id: Some(id), r#async: true, .. }) => {
-                return ctx.diagnostic(diagnostics::async_component(id.span, id.name.as_str()));
+            AstKind::Function(Function { id: Some(_), r#async: true, .. }) => {
+                return ctx.diagnostic(diagnostics::async_component(span, hook_name));
             }
             // Hooks can't be called from async arrow function.
             AstKind::ArrowFunctionExpression(ArrowFunctionExpression {
diff --git a/crates/oxc_linter/src/snapshots/react_rules_of_hooks.snap b/crates/oxc_linter/src/snapshots/react_rules_of_hooks.snap
@@ -585,12 +585,12 @@ source: crates/oxc_linter/src/tester.rs
    ·               ──────────
    ╰────
 
-  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "AsyncComponent" cannot be called in an async function.
-   ╭─[rules_of_hooks.tsx:2:32]
- 1 │ 
+  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useState" cannot be called in an async function.
+   ╭─[rules_of_hooks.tsx:3:21]
  2 │                 async function AsyncComponent() {
-   ·                                ──────────────
  3 │                     useState();
+   ·                     ──────────
+ 4 │                 }
    ╰────
 
   ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "Anonymous" cannot be called in an async function.
@@ -602,28 +602,28 @@ source: crates/oxc_linter/src/tester.rs
  5 │             
    ╰────
 
-  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "Page" cannot be called in an async function.
-   ╭─[rules_of_hooks.tsx:2:32]
- 1 │ 
+  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useId" cannot be called in an async function.
+   ╭─[rules_of_hooks.tsx:3:19]
  2 │                 async function Page() {
-   ·                                ────
  3 │                   useId();
+   ·                   ───────
+ 4 │                   React.useId();
    ╰────
 
-  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "Page" cannot be called in an async function.
-   ╭─[rules_of_hooks.tsx:2:32]
- 1 │ 
- 2 │                 async function Page() {
-   ·                                ────
+  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useId" cannot be called in an async function.
+   ╭─[rules_of_hooks.tsx:4:19]
  3 │                   useId();
+ 4 │                   React.useId();
+   ·                   ─────────────
+ 5 │                 }
    ╰────
 
-  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useAsyncHook" cannot be called in an async function.
-   ╭─[rules_of_hooks.tsx:2:32]
- 1 │ 
+  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useState" cannot be called in an async function.
+   ╭─[rules_of_hooks.tsx:3:21]
  2 │                 async function useAsyncHook() {
-   ·                                ────────────
  3 │                     useState();
+   ·                     ──────────
+ 4 │                 }
    ╰────
 
   ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "useId" is called in function "notAHook" 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".
@@ -682,12 +682,12 @@ source: crates/oxc_linter/src/tester.rs
  5 │                 }
    ╰────
 
-  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "AsyncComponent" cannot be called in an async function.
-   ╭─[rules_of_hooks.tsx:2:28]
- 1 │ 
+  ⚠ eslint-plugin-react-hooks(rules-of-hooks): React Hook "use" cannot be called in an async function.
+   ╭─[rules_of_hooks.tsx:3:21]
  2 │             async function AsyncComponent() {
-   ·                            ──────────────
  3 │                     use();
+   ·                     ─────
+ 4 │             }
    ╰────
 
   ⚠ 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".

Original file line number	Diff line number	Diff line change
`@@ -207,8 +207,8 @@ impl Rule for RulesOfHooks {`
`207`	`207`	`}`
`208`	`208`	`}`
`209`	`209`	`// Hooks can't be called from async function.`
`210`		`- AstKind::Function(Function { id: Some(id), r#async: true, .. }) => {`
`211`		`- return ctx.diagnostic(diagnostics::async_component(id.span, id.name.as_str()));`
	`210`	`+ AstKind::Function(Function { id: Some(_), r#async: true, .. }) => {`
	`211`	`+ return ctx.diagnostic(diagnostics::async_component(span, hook_name));`
`212`	`212`	`}`
`213`	`213`	`// Hooks can't be called from async arrow function.`
`214`	`214`	`AstKind::ArrowFunctionExpression(ArrowFunctionExpression {`