Update for hooks function support

Author: lewisl9029

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

@@ -407,7 +407,7 @@ const tests = {
       }
     `,
     `
-      // Valid because render-hooks acts as a component boundary
+      // Valid because Hooks component acts as a component boundary
       function App(props) {
         return props.isOpen
           ? <Hooks>
@@ -416,6 +416,14 @@ const tests = {
           : null;
       }
     `,
+    `
+      // Valid because hooks function acts as a component boundary
+      function App(props) {
+        return props.isOpen
+          ? hooks(() => <Modal close={useCallback(() => props.setIsOpen(false), [props.setIsOpen])} />) 
+          : null;
+      }
+    `,
   ],
   invalid: [
     {
@@ -968,7 +976,7 @@ const tests = {
     },
     {
       code: `
-        // Invalid because rule of hooks still need to be adhered to within render-hooks
+        // Invalid because rule of hooks still need to be adhered to within Hooks component
         function App(props) {
           return props.isOpen
             ? <Hooks>
@@ -979,8 +987,21 @@ const tests = {
             : null;
         }
       `,
-      errors: [conditionalError('useCallback')]
-    }
+      errors: [conditionalError('useCallback')],
+    },
+    {
+      code: `
+        // Invalid because rule of hooks still need to be adhered to within hooks function
+        function App(props) {
+          return props.isOpen
+            ? hooks(() => {
+                return <Modal close={props.setIsOpen ? useCallback(() => props.setIsOpen(false), [props.setIsOpen]) : undefined} />;
+              }) 
+            : null;
+        }
+      `,
+      errors: [conditionalError('useCallback')],
+    },
   ],
 };
 

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

@@ -106,11 +106,22 @@ function isInsideComponentOrHook(node) {
 }
 
 function isDirectlyInsideRenderHooks(node) {
-  return node.parent && 
-    node.parent.type === 'JSXExpressionContainer' && 
-    node.parent.parent && 
-    node.parent.parent.type === 'JSXElement' && 
+  if (!node.parent) {
+    return false;
+  }
+
+  const isDirectlyInsideHooksComponent =
+    node.parent.type === 'JSXExpressionContainer' &&
+    node.parent.parent &&
+    node.parent.parent.type === 'JSXElement' &&
     node.parent.parent.openingElement.name.name === 'Hooks';
+  const isDirectlyInsideHooksFunction =
+    node.parent.type === 'CallExpression' &&
+    node.parent.callee &&
+    node.parent.callee.type === 'Identifier' &&
+    node.parent.callee.name === 'hooks';
+
+  return isDirectlyInsideHooksComponent || isDirectlyInsideHooksFunction;
 }
 
 export default {
@@ -360,7 +371,9 @@ export default {
         const isDirectlyInsideComponentOrHook = codePathFunctionName
           ? isComponentName(codePathFunctionName) ||
             isHook(codePathFunctionName)
-          : isForwardRefCallback(codePathNode) || isMemoCallback(codePathNode) || isDirectlyInsideRenderHooks(codePathNode);
+          : isForwardRefCallback(codePathNode) ||
+            isMemoCallback(codePathNode) ||
+            isDirectlyInsideRenderHooks(codePathNode);
 
         // Compute the earliest finalizer level using information from the
         // cache. We expect all reachable final segments to have a cache entry