fix(lint): support some of wrapped hook calls in useExhaustiveDepende…

…ncies (#4964) Signed-off-by: Naoki Ikeguchi <[email protected]> Signed-off-by: Naoki Ikeguchi <[email protected]>
biomejs · Jan 24, 2025 · e750523 · e750523
1 parent 44d3f81
commit e750523
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 4 deletions.
diff --git a/...encies_now_consider_react_hooks_stable_within_parentheses_or_type_assertions.md b/...encies_now_consider_react_hooks_stable_within_parentheses_or_type_assertions.md
@@ -0,0 +1,5 @@
+---
+biome_js_analyze: patch
+---
+
+# Fix #1597, useExhaustiveDependencies now consider React hooks stable within parentheses or type assertions
diff --git a/crates/biome_js_analyze/src/react/hooks.rs b/crates/biome_js_analyze/src/react/hooks.rs
@@ -447,7 +447,7 @@ pub fn is_binding_react_stable(
     let Some(callee) = declarator
         .initializer()
         .and_then(|initializer| initializer.expression().ok())
-        .and_then(|initializer| initializer.as_js_call_expression()?.callee().ok())
+        .and_then(|initializer| unwrap_to_call_expression(initializer)?.callee().ok())
     else {
         return false;
     };
@@ -474,6 +474,32 @@ pub fn is_binding_react_stable(
     })
 }
 
+/// Unwrap the expression to a call expression without changing the result of the expression,
+/// such as type assertions.
+fn unwrap_to_call_expression(mut expression: AnyJsExpression) -> Option<JsCallExpression> {
+    loop {
+        match expression {
+            AnyJsExpression::JsCallExpression(expr) => return Some(expr),
+            AnyJsExpression::JsParenthesizedExpression(expr) => {
+                expression = expr.expression().ok()?;
+            }
+            AnyJsExpression::JsSequenceExpression(expr) => {
+                expression = expr.right().ok()?;
+            }
+            AnyJsExpression::TsAsExpression(expr) => {
+                expression = expr.expression().ok()?;
+            }
+            AnyJsExpression::TsSatisfiesExpression(expr) => {
+                expression = expr.expression().ok()?;
+            }
+            AnyJsExpression::TsNonNullAssertionExpression(expr) => {
+                expression = expr.expression().ok()?;
+            }
+            _ => return None,
+        }
+    }
+}
+
 #[cfg(test)]
 mod test {
     use super::*;

diff --git a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/valid.ts b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/valid.ts
@@ -1,6 +1,6 @@
 /* should not generate diagnostics */
 
-import { useEffect } from "react";
+import { type MutableRefObject, useEffect, useRef } from "react";
 
 // capturing declarations
 function overloaded(s: string): string;
@@ -46,3 +46,20 @@ export function MyComponent3({ outer }: { outer: string[] }) {
 			console.log(a)
 		}, []);
 }
+
+// useRef's are still considered as stable even if there's any type assertion
+export function MyComponent4() {
+    const parenthesizedRef = (((useRef())));
+    const sequenceRef = (doSomething(), useRef());
+    const nonNullAssertedRef = useRef()!;
+    const castedRef = useRef() as MutableRefObject<HTMLElement>;
+    const satisfiedRef = useRef() satisfies MutableRefObject<HTMLElement>;
+
+    useEffect(() => {
+        console.log(parenthesizedRef.current);
+        console.log(sequenceRef.current);
+        console.log(nonNullAssertedRef.current);
+        console.log(castedRef.current.innerHTML);
+        console.log(satisfiedRef.current.innerHTML);
+    }, []);
+}
diff --git a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/valid.ts.snap b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/valid.ts.snap
@@ -6,7 +6,7 @@ expression: valid.ts
 ```ts
 /* should not generate diagnostics */
 
-import { useEffect } from "react";
+import { type MutableRefObject, useEffect, useRef } from "react";
 
 // capturing declarations
 function overloaded(s: string): string;
@@ -53,6 +53,21 @@ export function MyComponent3({ outer }: { outer: string[] }) {
 		}, []);
 }
 
-```
+// useRef's are still considered as stable even if there's any type assertion
+export function MyComponent4() {
+    const parenthesizedRef = (((useRef())));
+    const sequenceRef = (doSomething(), useRef());
+    const nonNullAssertedRef = useRef()!;
+    const castedRef = useRef() as MutableRefObject<HTMLElement>;
+    const satisfiedRef = useRef() satisfies MutableRefObject<HTMLElement>;
 
+    useEffect(() => {
+        console.log(parenthesizedRef.current);
+        console.log(sequenceRef.current);
+        console.log(nonNullAssertedRef.current);
+        console.log(castedRef.current.innerHTML);
+        console.log(satisfiedRef.current.innerHTML);
+    }, []);
+}
 
+```