Add RulesOfHooks support for use

Usage of the new `use` hook needs to conform to the rules of hooks, with
the one exception that it can be called conditionally.

ghstack-source-id: 35b7e1c
Pull Request resolved: #25370

Author: poteto

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

@@ -257,7 +257,6 @@ const tests = {
       code: normalizeIndent`
         // Valid because they're not matching use[A-Z].
         fooState();
-        use();
         _use();
         _useState();
         use_hook();
@@ -496,8 +495,6 @@ const tests = {
     },
     {
       code: normalizeIndent`
-        Hook.use();
-        Hook._use();
         Hook.useState();
         Hook._useState();
         Hook.use42();
@@ -1146,6 +1143,25 @@ if (__EXPERIMENTAL__) {
         }
       `,
     },
+    {
+      code: normalizeIndent`
+        function App() {
+          const text = use(Promise.resolve('A'));
+          return <Text text={text} />
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          if (shouldShowText) {
+            const text = use(query);
+            return <Text text={text} />
+          }
+          return <Text text={shouldFetchBackupText ? use(backupQuery) : "Nothing to see here"} />
+        }
+      `,
+    },
   ];
   tests.invalid = [
     ...tests.invalid,
@@ -1220,6 +1236,66 @@ if (__EXPERIMENTAL__) {
       `,
       errors: [useEventError('onClick')],
     },
+    {
+      code: normalizeIndent`
+        Hook.use();
+        Hook._use();
+        Hook.useState();
+        Hook._useState();
+        Hook.use42();
+        Hook.useHook();
+        Hook.use_hook();
+      `,
+      errors: [
+        topLevelError('Hook.use'),
+        topLevelError('Hook.useState'),
+        topLevelError('Hook.use42'),
+        topLevelError('Hook.useHook'),
+      ],
+    },
+    {
+      code: normalizeIndent`
+        function notAComponent() {
+          use(promise);
+        }
+      `,
+      errors: [functionError('use', 'notAComponent')],
+    },
+    {
+      code: normalizeIndent`
+        function App() {
+          const data = useUserQuery((searchStrings) => {
+            const query = Promise.all(fetch(user, searchStrings));
+            return use(query);
+          });
+          return (
+            <ul>
+              {data.map(d => <li>{d.title}</li>)}
+            </ul>
+          );
+        }
+      `,
+      errors: [genericError('use')],
+    },
+    {
+      code: normalizeIndent`
+        const text = use(promise);
+        function App() {
+          return <Text text={text} />
+        }
+      `,
+      errors: [topLevelError('use')],
+    },
+    {
+      code: normalizeIndent`
+        class C {
+          m() {
+            use(promise);
+          }
+        }
+      `,
+      errors: [classError('use')],
+    },
   ];
 }
 

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

@@ -16,6 +16,9 @@
  */
 
 function isHookName(s) {
+  if (__EXPERIMENTAL__) {
+    return s === 'use' || /^use[A-Z0-9]/.test(s);
+  }
   return /^use[A-Z0-9]/.test(s);
 }
 
@@ -107,6 +110,13 @@ function isUseEventIdentifier(node) {
   return false;
 }
 
+function isUseIdentifier(node) {
+  if (__EXPERIMENTAL__) {
+    return node.type === 'Identifier' && node.name === 'use';
+  }
+  return false;
+}
+
 export default {
   meta: {
     type: 'problem',
@@ -480,6 +490,13 @@ export default {
               //
               // Special case when we think there might be an early return.
               if (!cycled && pathsFromStartToEnd !== allPathsFromStartToEnd) {
+                let shouldReport = true;
+                if (__EXPERIMENTAL__) {
+                  // `use(...)` can be called conditionally.
+                  if (isUseIdentifier(hook)) {
+                    shouldReport = false;
+                  }
+                }
                 const message =
                   `React Hook "${context.getSource(hook)}" is called ` +
                   'conditionally. React Hooks must be called in the exact ' +
@@ -488,7 +505,9 @@ export default {
                     ? ' Did you accidentally call a React Hook after an' +
                       ' early return?'
                     : '');
-                context.report({node: hook, message});
+                if (shouldReport) {
+                  context.report({node: hook, message});
+                }
               }
             } else if (
               codePathNode.parent &&