diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js index 996a7873e9b4f..d7b154caa0145 100644 --- 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 onClick2()} /> } `, ` diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js index c9099b567e13b..9d26caf8ac28e 100644 --- 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