[lint] treat React.use() the same as use() (#27769)

kassens · web-flow · commit 640ccebb7d96 · 2023-12-01T15:02:11.000-05:00
We should probably treat `React.use()` the same as `use()` to allow it
within loops and conditionals.

Ideally this would implement a test that `React` is imported or required
from `'react'`, but we don't otherwise implement such a test.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -489,9 +489,12 @@ const tests = {
     },
     {
       code: normalizeIndent`
+        import * as React from 'react';
         function App() {
           if (shouldShowText) {
             const text = use(query);
+            const data = React.use(thing);
+            const data2 = react.use(thing2);
             return <Text text={text} />
           }
           return <Text text={shouldFetchBackupText ? use(backupQuery) : "Nothing to see here"} />
diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -108,7 +108,7 @@ function isUseEffectEventIdentifier(node) {
 }
 
 function isUseIdentifier(node) {
-  return node.type === 'Identifier' && node.name === 'use';
+  return isReactFunction(node, 'use');
 }
 
 export default {
