Add special case handling for render-hooks

Author: lewisl9029

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

@@ -337,6 +337,16 @@ const tests = {
         const [myState, setMyState] = useState(null);
       }
     `,
+    `
+      // Valid because render-hooks acts as a component boundary
+      function App(props) {
+        return props.isOpen
+          ? <Hooks>
+              {() => <Modal close={useCallback(() => props.setIsOpen(false), [props.setIsOpen])} />}
+            </Hooks> 
+          : null;
+      }
+    `,
   ],
   invalid: [
     {
@@ -889,6 +899,21 @@ const tests = {
       `,
       errors: [classError('useState')],
     },
+    {
+      code: `
+        // Invalid because rule of hooks still need to be adhered to within render-hooks
+        function App(props) {
+          return props.isOpen
+            ? <Hooks>
+                {() => {
+                  return <Modal close={props.setIsOpen ? useCallback(() => props.setIsOpen(false), [props.setIsOpen]) : undefined} />;
+                }}
+              </Hooks> 
+            : null;
+        }
+      `,
+      errors: [conditionalError('useCallback')]
+    }
   ],
 };
 

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

@@ -104,6 +104,14 @@ function isInsideComponentOrHook(node) {
   return false;
 }
 
+function isDirectlyInsideRenderHooks(node) {
+  return node.parent && 
+    node.parent.type === 'JSXExpressionContainer' && 
+    node.parent.parent && 
+    node.parent.parent.type === 'JSXElement' && 
+    node.parent.parent.openingElement.name.name === 'Hooks';
+}
+
 export default {
   meta: {
     type: 'problem',
@@ -352,7 +360,7 @@ export default {
         const isDirectlyInsideComponentOrHook = codePathFunctionName
           ? isComponentName(codePathFunctionName) ||
             isHook(codePathFunctionName)
-          : isForwardRefCallback(codePathNode) || isMemoCallback(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