Support react-anonymous in rules of hooks

packages/eslint-plugin-react-hooks/README.md

@@ -1,4 +1,6 @@
-# `eslint-plugin-react-hooks`
+# `@lewisl9029/eslint-plugin-react-hooks`
+
+This is a fork of the official eslint plugin `eslint-plugin-react-hooks`, that adds support for the [react-anonymous](https://github.com/lewisl9029/react-anonymous#readme) library/pattern.
 
 This ESLint plugin enforces the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html).
 
@@ -12,10 +14,10 @@ Assuming you already have ESLint installed, run:
 
 ```sh
 # npm
-npm install eslint-plugin-react-hooks --save-dev
+npm install @lewisl9029/eslint-plugin-react-hooks --save-dev
 
 # yarn
-yarn add eslint-plugin-react-hooks --dev
+yarn add @lewisl90290/eslint-plugin-react-hooks --dev
 ```
 
 Then extend the recommended eslint config:

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

@@ -406,6 +406,24 @@ const tests = {
         const [myState, setMyState] = useState(null);
       }
     `,
+    `
+      // Valid because called in Anonymous component
+      function App(props) {
+        return props.isOpen
+          ? <Anonymous>
+              {() => <Modal close={useCallback(() => props.setIsOpen(false), [props.setIsOpen])} />}
+            </Anonymous> 
+          : null;
+      }
+    `,
+    `
+      // Valid because called in anonymous function
+      function App(props) {
+        return props.isOpen
+          ? anonymous(() => <Modal close={useCallback(() => props.setIsOpen(false), [props.setIsOpen])} />) 
+          : null;
+      }
+    `,
   ],
   invalid: [
     {
@@ -956,6 +974,34 @@ const tests = {
       `,
       errors: [classError('useState')],
     },
+    {
+      code: `
+        // Invalid because rule of hooks still need to be adhered to within Anonymous component
+        function App(props) {
+          return props.isOpen
+            ? <Anonymous>
+                {() => {
+                  return <Modal close={props.setIsOpen ? useCallback(() => props.setIsOpen(false), [props.setIsOpen]) : undefined} />;
+                }}
+              </Anonymous> 
+            : null;
+        }
+      `,
+      errors: [conditionalError('useCallback')],
+    },
+    {
+      code: `
+        // Invalid because rule of hooks still need to be adhered to within anonymous function
+        function App(props) {
+          return props.isOpen
+            ? anonymous(() => {
+                return <Modal close={props.setIsOpen ? useCallback(() => props.setIsOpen(false), [props.setIsOpen]) : undefined} />;
+              }) 
+            : null;
+        }
+      `,
+      errors: [conditionalError('useCallback')],
+    },
   ],
 };
 

packages/eslint-plugin-react-hooks/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "eslint-plugin-react-hooks",
-  "description": "ESLint rules for React Hooks",
-  "version": "4.5.0",
+  "name": "@lewisl9029/eslint-plugin-react-hooks-for-react-anonymous",
+  "description": "Fork of ESLint rules for React Hooks for react-anonymous",
+  "version": "0.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

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

@@ -105,6 +105,25 @@ function isInsideComponentOrHook(node) {
   return false;
 }
 
+function isDirectlyInsideAnonymousComponent(node) {
+  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 === 'Anonymous';
+  const isDirectlyInsideHooksFunction =
+    node.parent.type === 'CallExpression' &&
+    node.parent.callee &&
+    node.parent.callee.type === 'Identifier' &&
+    node.parent.callee.name === 'anonymous';
+
+  return isDirectlyInsideHooksComponent || isDirectlyInsideHooksFunction;
+}
+
 export default {
   meta: {
     type: 'problem',
@@ -352,7 +371,9 @@ export default {
         const isDirectlyInsideComponentOrHook = codePathFunctionName
           ? isComponentName(codePathFunctionName) ||
             isHook(codePathFunctionName)
-          : isForwardRefCallback(codePathNode) || isMemoCallback(codePathNode);
+          : isForwardRefCallback(codePathNode) ||
+            isMemoCallback(codePathNode) ||
+            isDirectlyInsideAnonymousComponent(codePathNode);
 
         // Compute the earliest finalizer level using information from the
         // cache. We expect all reachable final segments to have a cache entry