feat(linter/exhaustive-deps): add support for useEffectEvent (#14041)

stipsan · camc314 · web-flow · commit 24819646b61a · 2025-09-24T15:35:42.000+01:00
In order to support: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event We use https://www.npmjs.com/package/use-effect-event in a lot of places, and this is the last blocker for us to use oxlint --------- Signed-off-by: Cody Olsen <81981+stipsan@users.noreply.github.com> Co-authored-by: Cameron Clark <cameron.clark@hey.com>
diff --git a/crates/oxc_linter/src/rules/react/exhaustive_deps.rs b/crates/oxc_linter/src/rules/react/exhaustive_deps.rs
@@ -181,6 +181,17 @@ fn ref_accessed_directly_in_effect_cleanup_diagnostic(span: Span) -> OxcDiagnost
         .with_error_code_scope(SCOPE)
 }
 
+fn functions_returned_from_use_effect_event_must_not_be_included_in_dependency_array(
+    span: Span,
+) -> OxcDiagnostic {
+    OxcDiagnostic::warn(
+        "Functions returned from `useEffectEvent` must not be included in the dependency array.",
+    )
+    .with_label(span)
+    .with_help("Remove the dependency from the dependency array.")
+    .with_error_code_scope(SCOPE)
+}
+
 #[derive(Debug, Default, Clone)]
 pub struct ExhaustiveDeps(Box<ExhaustiveDepsConfig>);
 
@@ -591,6 +602,18 @@ impl Rule for ExhaustiveDeps {
             );
         }
 
+        for dep in &declared_dependencies {
+            if let Some(symbol_id) = dep.symbol_id
+                && let AstKind::VariableDeclarator(var_decl) =
+                    ctx.semantic().symbol_declaration(symbol_id).kind()
+                && let Some(Expression::CallExpression(call_expr)) = &var_decl.init
+                && let Some(name) = func_call_without_react_namespace(call_expr)
+                && name == "useEffectEvent"
+            {
+                ctx.diagnostic(functions_returned_from_use_effect_event_must_not_be_included_in_dependency_array(dep.span));
+            }
+        }
+
         // effects are allowed to have extra dependencies
         if !is_effect {
             // lastly, we need co compare for any unnecessary deps
@@ -1047,7 +1070,7 @@ fn is_stable_value<'a, 'b>(
                 return false;
             };
 
-            if init_name == "useRef" {
+            if init_name == "useRef" || init_name == "useEffectEvent" {
                 return true;
             }
 
@@ -2605,7 +2628,17 @@ fn test() {
         r"function MyComponent(props) { useEffect(() => { console.log((props.foo).bar) }, [props.foo!.bar]) }",
         r"function MyComponent(props) { const external = {}; const y = useMemo(() => { const z = foo<typeof external>(); return z; }, []) }",
         r#"function Test() { const [state, setState] = useState(); useEffect(() => { console.log("state", state); }); }"#,
-        "function Test() { const [foo, setFoo] = useState(true); _setFoo = setFoo; useEffect(() => { setFoo(false) }, []); }",
+        "function MyComponent({ theme }) {
+          const onStuff = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useEffect(() => {
+            onStuff();
+          }, []);
+          React.useEffect(() => {
+            onStuff();
+          }, []);
+        }",
     ];
 
     let fail = vec![
@@ -4063,6 +4096,17 @@ fn test() {
           log();
         }, []);
         }"#,
+        r"function MyComponent({ theme }) {
+          const onStuff = useEffectEvent(() => {
+            showNotification(theme);
+          });
+          useEffect(() => {
+            onStuff();
+          }, [onStuff]);
+          React.useEffect(() => {
+            onStuff();
+          }, [onStuff]);
+        }",
     ];
 
     let pass_additional_hooks = vec![(
diff --git a/crates/oxc_linter/src/snapshots/react_exhaustive_deps.snap b/crates/oxc_linter/src/snapshots/react_exhaustive_deps.snap
@@ -3073,6 +3073,24 @@ source: crates/oxc_linter/src/tester.rs
     ╰────
   help: Either include it or remove the dependency array.
 
+  ⚠ eslint-plugin-react-hooks(exhaustive-deps): Functions returned from `useEffectEvent` must not be included in the dependency array.
+   ╭─[exhaustive_deps.tsx:7:15]
+ 6 │             onStuff();
+ 7 │           }, [onStuff]);
+   ·               ───────
+ 8 │           React.useEffect(() => {
+   ╰────
+  help: Remove the dependency from the dependency array.
+
+  ⚠ eslint-plugin-react-hooks(exhaustive-deps): Functions returned from `useEffectEvent` must not be included in the dependency array.
+    ╭─[exhaustive_deps.tsx:10:15]
+  9 │             onStuff();
+ 10 │           }, [onStuff]);
+    ·               ───────
+ 11 │         }
+    ╰────
+  help: Remove the dependency from the dependency array.
+
   ⚠ eslint-plugin-react-hooks(exhaustive-deps): React Hook useSpecialEffect has a missing dependency: 'state'
    ╭─[exhaustive_deps.tsx:7:14]
  5 │             const someNumber: typeof state = 2;
