Event functions can also be referenced within other event functions

facebook · Sep 23, 2022 · 76c096c · 76c096c
1 parent 9550edb
commit 76c096c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -441,15 +441,20 @@ const tests = {
       }
     `,
     `
-      // Valid because functions created with useEvent can be passed by reference in useEffect.
+      // Valid because functions created with useEvent can be passed by reference in useEffect
+      // and useEvent.
       function MyComponent({ theme }) {
         const onClick = useEvent(() => {
           showNotification(theme);
         });
+        const onClick2 = useEvent(() => {
+          debounce(onClick);
+        });
         useEffect(() => {
           let id = setInterval(onClick, 100);
           return () => clearInterval(onClick);
         }, []);
+        return <Child onClick={() => onClick2()} />
       }
     `,
     `

diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -572,10 +572,12 @@ export default {
         // OK - onClick();
         resolveUseEventViolation(scope, node.callee);
 
-        // useEvent: useEvent functions can be passed by reference within useEffect
+        // useEvent: useEvent functions can be passed by reference within useEffect as well as in
+        // another useEvent
         if (
           node.callee.type === 'Identifier' &&
-          node.callee.name === 'useEffect' &&
+          (node.callee.name === 'useEffect' ||
+            isUseEventIdentifier(node.callee)) &&
           node.arguments.length > 0
         ) {
           // Denote that we have traversed into a useEffect call, and stash the CallExpr for