fix: hooks returned by factory functions not linted

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

@@ -206,7 +206,7 @@ const tests = {
       _use();
       _useState();
       use_hook();
-      // also valid because it's not matching the PascalCase namespace
+      // also valid because it's not matching the allow-listed namespaces
       jest.useFakeTimer()
     `,
     `
@@ -406,6 +406,28 @@ const tests = {
         const [myState, setMyState] = useState(null);
       }
     `,
+    {
+      code: `
+      // Valid because we can have a factory function that creates hooks
+
+      function createHooks() {
+        return {
+          foo: {
+            useQuery: () => {
+              data: 'foo.useQuery'
+            },
+          }
+        };
+      }
+      const myHooks = createHooks();
+
+      const MyComponent = () => {
+        const query = myHooks.foo.useQuery();
+
+        return <>{query.data}</>;
+      }
+      `
+    }
   ],
   invalid: [
     {
@@ -449,7 +471,7 @@ const tests = {
     },
     {
       code: `
-        // This is a false positive (it's valid) that unfortunately 
+        // This is a false positive (it's valid) that unfortunately
         // we cannot avoid. Prefer to rename it to not start with "use"
         class Foo extends Component {
           render() {
@@ -956,6 +978,52 @@ const tests = {
       `,
       errors: [classError('useState')],
     },
+    {
+      code: `
+        function createHooks() {
+          return {
+            useFoo: () => {
+              data: 'foo.useQuery'
+            },
+          };
+        }
+        const hooks = createHooks();
+
+        const MyComponent = () => {
+          if (a) {
+            return;
+          }
+          const query = hooks.useFoo();
+
+          return <>{query.data}</>;
+        }
+      `,
+      errors: [conditionalError('hooks.useFoo', true)],
+    },
+    {
+      code: `
+        function createHooks() {
+          return {
+            foo: {
+              useQuery: () => {
+                data: 'foo.useQuery'
+              },
+            }
+          };
+        }
+        const hooks = createHooks();
+
+        const MyComponent = () => {
+          if (a) {
+            return;
+          }
+          const query = hooks.foo.useQuery();
+
+          return <>{query.data}</>;
+        }
+      `,
+      errors: [conditionalError('hooks.useFoo.useQuery')],
+    },
   ],
 };
 

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

@@ -19,6 +19,11 @@ function isHookName(s) {
   return /^use[A-Z0-9].*$/.test(s);
 }
 
+/**
+ * Namespaces that are not considered hooks
+ */
+const nonHookNamespaces = ['jest']
+
 /**
  * We consider hooks to be a hook name identifier or a member expression
  * containing a hook name.
@@ -33,8 +38,7 @@ function isHook(node) {
     isHook(node.property)
   ) {
     const obj = node.object;
-    const isPascalCaseNameSpace = /^[A-Z].*/;
-    return obj.type === 'Identifier' && isPascalCaseNameSpace.test(obj.name);
+    return obj.type === 'Identifier' && !nonHookNamespaces.includes(obj.name)
   } else {
     return false;
   }
@@ -161,7 +165,7 @@ export default {
          */
 
         function countPathsFromStart(segment, pathHistory) {
-          const {cache} = countPathsFromStart;
+          const { cache } = countPathsFromStart;
           let paths = cache.get(segment.id);
           const pathList = new Set(pathHistory);
 
@@ -232,7 +236,7 @@ export default {
          */
 
         function countPathsToEnd(segment, pathHistory) {
-          const {cache} = countPathsToEnd;
+          const { cache } = countPathsToEnd;
           let paths = cache.get(segment.id);
           const pathList = new Set(pathHistory);
 
@@ -296,7 +300,7 @@ export default {
          */
 
         function shortestPathLengthToStart(segment) {
-          const {cache} = shortestPathLengthToStart;
+          const { cache } = shortestPathLengthToStart;
           let length = cache.get(segment.id);
 
           // If `length` is null then we found a cycle! Return infinity since
@@ -351,7 +355,7 @@ export default {
         );
         const isDirectlyInsideComponentOrHook = codePathFunctionName
           ? isComponentName(codePathFunctionName) ||
-            isHook(codePathFunctionName)
+          isHook(codePathFunctionName)
           : isForwardRefCallback(codePathNode) || isMemoCallback(codePathNode);
 
         // Compute the earliest finalizer level using information from the
@@ -459,9 +463,9 @@ export default {
                   'same order in every component render.' +
                   (possiblyHasEarlyReturn
                     ? ' Did you accidentally call a React Hook after an' +
-                      ' early return?'
+                    ' early return?'
                     : '');
-                context.report({node: hook, message});
+                context.report({ node: hook, message });
               }
             } else if (
               codePathNode.parent &&
@@ -474,7 +478,7 @@ export default {
                 `React Hook "${context.getSource(hook)}" cannot be called ` +
                 'in a class component. React Hooks must be called in a ' +
                 'React function component or a custom React Hook function.';
-              context.report({node: hook, message});
+              context.report({ node: hook, message });
             } else if (codePathFunctionName) {
               // Custom message if we found an invalid function name.
               const message =
@@ -484,14 +488,14 @@ export default {
                 'React Hook function.' +
                 ' React component names must start with an uppercase letter.' +
                 ' React Hook names must start with the word "use".';
-              context.report({node: hook, message});
+              context.report({ node: hook, message });
             } else if (codePathNode.type === 'Program') {
               // These are dangerous if you have inline requires enabled.
               const message =
                 `React Hook "${context.getSource(hook)}" cannot be called ` +
                 'at the top level. React Hooks must be called in a ' +
                 'React function component or a custom React Hook function.';
-              context.report({node: hook, message});
+              context.report({ node: hook, message });
             } else {
               // Assume in all other cases the user called a hook in some
               // random function callback. This should usually be true for
@@ -503,7 +507,7 @@ export default {
                   `React Hook "${context.getSource(hook)}" cannot be called ` +
                   'inside a callback. React Hooks must be called in a ' +
                   'React function component or a custom React Hook function.';
-                context.report({node: hook, message});
+                context.report({ node: hook, message });
               }
             }
           }