fix(useHookAtTopLevel): recognize hook property in member expression calls

CHANGELOG.md

@@ -59,6 +59,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 - [noEmptyInterface](https://biomejs.dev/linter/rules/no-empty-interface/) now ignores empty interfaces in ambient modules ([#3110](https://github.com/biomejs/biome/issues/3110)). Contributed by @Conaclos
 
+- [useHookAtTopLevel](https://biomejs.dev/linter/rules/use-hook-at-top-level/) now recognizes properties named as hooks like `foo.useFoo()`.
+
 ### Parser
 
 #### New features

crates/biome_js_analyze/src/react/hooks.rs

@@ -111,15 +111,17 @@ impl From<(u8, u8, bool)> for ReactHookConfiguration {
 }
 
 fn get_untrimmed_callee_name(call: &JsCallExpression) -> Option<SyntaxToken<JsLanguage>> {
-    let name = call
-        .callee()
-        .ok()?
-        .as_js_identifier_expression()?
-        .name()
-        .ok()?
-        .value_token()
-        .ok()?;
-    Some(name)
+    let callee = call.callee().ok()?;
+
+    if let Some(identifier) = callee.as_js_identifier_expression() {
+        return identifier.name().ok()?.value_token().ok();
+    }
+
+    if let Some(member_expression) = callee.as_js_static_member_expression() {
+        return member_expression.member().ok()?.value_token().ok();
+    }
+
+    None
 }
 
 /// Checks whether the given function name belongs to a React component, based

crates/biome_js_analyze/tests/specs/correctness/useHookAtTopLevel/customHook.js

@@ -6,4 +6,9 @@ function MyComponent() {
     if (a) {
         const { a } = useCustomHook();
     }
+
+    // This is invalid
+    if (a) {
+        const { a } = foo.bar.useCustomHook();
+    }
 }

crates/biome_js_analyze/tests/specs/correctness/useHookAtTopLevel/customHook.js.snap

@@ -12,6 +12,11 @@ function MyComponent() {
     if (a) {
         const { a } = useCustomHook();
     }
+
+    // This is invalid
+    if (a) {
+        const { a } = foo.bar.useCustomHook();
+    }
 }
 ```
 
@@ -26,7 +31,7 @@ customHook.js:7:23 lint/correctness/useHookAtTopLevel ━━━━━━━━
   > 7 │         const { a } = useCustomHook();
       │                       ^^^^^^^^^^^^^
     8 │     }
-    9 │ }
+    9 │ 
 
   i For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
 
@@ -35,4 +40,21 @@ customHook.js:7:23 lint/correctness/useHookAtTopLevel ━━━━━━━━
 
 ```
 
+```
+customHook.js:12:23 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
+
+    10 │     // This is invalid
+    11 │     if (a) {
+  > 12 │         const { a } = foo.bar.useCustomHook();
+       │                       ^^^^^^^^^^^^^^^^^^^^^
+    13 │     }
+    14 │ }
+
+  i For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
+
+  i See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
+
 
+```