[New] component detection: add util.isReactHookCall

Rename Components test suite filename to match sibling lib/util/Components filename.
Extend Components testComponentsDetect function to accept custom instructions, and to accumulate the results of processing those instructions.
Add utility to check whether a CallExpression is a React hook call.

Author: duncanbeevers

CHANGELOG.md

@@ -7,6 +7,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ### Added
 * [`function-component-definition`]: support namedComponents option being an array ([#3129][] @petersendidit)
+* component detection: add `util.isReactHookCall` ([#3156][] @duncanbeevers)
 
 ### Fixed
 * [`jsx-indent-props`]: Reset `line.isUsingOperator` correctly after ternary ([#3146][] @tobiaswaltl)
@@ -16,6 +17,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [Tests] component detection: Add testing scaffolding ([#3149][] @duncanbeevers)
 * [New] component detection: track React imports ([#3149][] @duncanbeevers)
 
+[#3156]: https://github.com/yannickcr/eslint-plugin-react/pull/3156
 [#3149]: https://github.com/yannickcr/eslint-plugin-react/pull/3149
 [#3146]: https://github.com/yannickcr/eslint-plugin-react/pull/3146
 [#3129]: https://github.com/yannickcr/eslint-plugin-react/pull/3129

lib/util/Components.js

@@ -7,6 +7,7 @@
 
 const doctrine = require('doctrine');
 const arrayIncludes = require('array-includes');
+const fromEntries = require('object.fromentries');
 const values = require('object.values');
 
 const variableUtil = require('./variable');
@@ -46,6 +47,8 @@ function mergeUsedPropTypes(propsList, newPropsList) {
   return propsList.concat(propsToAdd);
 }
 
+const USE_HOOK_PREFIX_REGEX = /^use[A-Z]/;
+
 const Lists = new WeakMap();
 const ReactImports = new WeakMap();
 
@@ -787,6 +790,84 @@ function componentRule(rule, context) {
         && !!(node.params || []).length
       );
     },
+
+    /**
+     * Identify whether a node (CallExpression) is a call to a React hook
+     *
+     * @param {ASTNode} node The AST node being searched. (expects CallExpression)
+     * @param {('useCallback'|'useContext'|'useDebugValue'|'useEffect'|'useImperativeHandle'|'useLayoutEffect'|'useMemo'|'useReducer'|'useRef'|'useState')[]} [expectedHookNames] React hook names to which search is limited.
+     * @returns {Boolean} True if the node is a call to a React hook
+     */
+    isReactHookCall(node, expectedHookNames) {
+      if (node.type !== 'CallExpression') {
+        return false;
+      }
+
+      const defaultReactImports = components.getDefaultReactImports();
+      const namedReactImports = components.getNamedReactImports();
+
+      const defaultReactImportName = defaultReactImports
+        && defaultReactImports[0]
+        && defaultReactImports[0].local.name;
+      const reactHookImportSpecifiers = namedReactImports
+        && namedReactImports.filter((specifier) => USE_HOOK_PREFIX_REGEX.test(specifier.imported.name));
+      const reactHookImportNames = reactHookImportSpecifiers
+        && fromEntries(reactHookImportSpecifiers.map((specifier) => [specifier.local.name, specifier.imported.name]));
+
+      const isPotentialReactHookCall = defaultReactImportName
+        && node.callee.type === 'MemberExpression'
+        && node.callee.object.type === 'Identifier'
+        && node.callee.object.name === defaultReactImportName
+        && node.callee.property.type === 'Identifier'
+        && node.callee.property.name.match(USE_HOOK_PREFIX_REGEX);
+
+      const isPotentialHookCall = reactHookImportNames
+        && node.callee.type === 'Identifier'
+        && node.callee.name.match(USE_HOOK_PREFIX_REGEX);
+
+      const scope = (isPotentialReactHookCall || isPotentialHookCall) && context.getScope();
+
+      const reactResolvedDefs = isPotentialReactHookCall
+        && scope.references
+        && scope.references.find(
+          (reference) => reference.identifier.name === defaultReactImportName
+        ).resolved.defs;
+
+      const isReactShadowed = isPotentialReactHookCall && reactResolvedDefs
+        && reactResolvedDefs.some((reactDef) => reactDef.type !== 'ImportBinding');
+
+      const potentialHookReference = isPotentialHookCall
+        && scope.references
+        && scope.references.find(
+          (reference) => reactHookImportNames[reference.identifier.name]
+        );
+
+      const hookResolvedDefs = potentialHookReference && potentialHookReference.resolved.defs;
+      const localHookName = (isPotentialReactHookCall && node.callee.property.name)
+        || (isPotentialHookCall && potentialHookReference && node.callee.name);
+      const isHookShadowed = isPotentialHookCall
+        && hookResolvedDefs
+        && hookResolvedDefs.some(
+          (hookDef) => hookDef.name.name === localHookName
+          && hookDef.type !== 'ImportBinding'
+        );
+
+      const isHookCall = (isPotentialReactHookCall && !isReactShadowed)
+        || (isPotentialHookCall && localHookName && !isHookShadowed);
+
+      if (!isHookCall) {
+        return false;
+      }
+
+      if (!expectedHookNames) {
+        return true;
+      }
+
+      return arrayIncludes(
+        expectedHookNames,
+        (reactHookImportNames && reactHookImportNames[localHookName]) || localHookName
+      );
+    },
   };
 
   // Component detection instructions

tests/util/Components.js

@@ -1,7 +1,9 @@
 'use strict';
 
 const assert = require('assert');
+const entries = require('object.entries');
 const eslint = require('eslint');
+const fromEntries = require('object.fromentries');
 const values = require('object.values');
 
 const Components = require('../../lib/util/Components');
@@ -19,12 +21,32 @@ const ruleTester = new eslint.RuleTester({
 
 describe('Components', () => {
   describe('static detect', () => {
-    function testComponentsDetect(test, done) {
-      const rule = Components.detect((context, components, util) => ({
-        'Program:exit'() {
-          done(context, components, util);
-        },
-      }));
+    function testComponentsDetect(test, instructionsOrDone, orDone) {
+      const done = orDone || instructionsOrDone;
+      const instructions = orDone ? instructionsOrDone : instructionsOrDone;
+
+      const rule = Components.detect((_context, components, util) => {
+        const instructionResults = [];
+
+        const augmentedInstructions = fromEntries(
+          entries(instructions || {}).map((nodeTypeAndHandler) => {
+            const nodeType = nodeTypeAndHandler[0];
+            const handler = nodeTypeAndHandler[1];
+            return [nodeType, (node) => {
+              instructionResults.push({ type: nodeType, result: handler(node, context, components, util) });
+            }];
+          })
+        );
+
+        return Object.assign({}, augmentedInstructions, {
+          'Program:exit'(node) {
+            if (augmentedInstructions['Program:exit']) {
+              augmentedInstructions['Program:exit'](node, context, components, util);
+            }
+            done(components, instructionResults);
+          },
+        });
+      });
 
       const tests = {
         valid: parsers.all([Object.assign({}, test, {
@@ -36,6 +58,7 @@ describe('Components', () => {
         })]),
         invalid: [],
       };
+
       ruleTester.run(test.code, rule, tests);
     }
 
@@ -45,7 +68,7 @@ describe('Components', () => {
           function MyStatelessComponent() {
             return <React.Fragment />;
           }`,
-      }, (_context, components) => {
+      }, (components) => {
         assert.equal(components.length(), 1, 'MyStatelessComponent should be detected component');
         values(components.list()).forEach((component) => {
           assert.equal(
@@ -65,7 +88,7 @@ describe('Components', () => {
             return <React.Fragment />;
           }
         }`,
-      }, (_context, components) => {
+      }, (components) => {
         assert(components.length() === 1, 'MyClassComponent should be detected component');
         values(components.list()).forEach((component) => {
           assert.equal(
@@ -80,7 +103,7 @@ describe('Components', () => {
     it('should detect React Imports', () => {
       testComponentsDetect({
         code: 'import React, { useCallback, useState } from \'react\'',
-      }, (_context, components) => {
+      }, (components) => {
         assert.deepEqual(
           components.getDefaultReactImports().map((specifier) => specifier.local.name),
           ['React'],
@@ -94,5 +117,186 @@ describe('Components', () => {
         );
       });
     });
+
+    describe('utils', () => {
+      describe('isReactHookCall', () => {
+        it('should not identify hook-like call', () => {
+          testComponentsDetect({
+            code: `import { useRef } from 'react'
+            function useColor() {
+              return useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: false }]);
+          });
+        });
+
+        it('should identify hook call', () => {
+          testComponentsDetect({
+            code: `import { useState } from 'react'
+            function useColor() {
+              return useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: true }]);
+          });
+        });
+
+        it('should identify aliased hook call', () => {
+          testComponentsDetect({
+            code: `import { useState as useStateAlternative } from 'react'
+            function useColor() {
+              return useStateAlternative()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: true }]);
+          });
+        });
+
+        it('should identify aliased present named hook call', () => {
+          testComponentsDetect({
+            code: `import { useState as useStateAlternative } from 'react'
+            function useColor() {
+              return useStateAlternative()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node, ['useState']),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: true }]);
+          });
+        });
+
+        it('should not identify shadowed hook call', () => {
+          testComponentsDetect({
+            code: `import { useState } from 'react'
+            function useColor() {
+              function useState() {
+                return null
+              }
+              return useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: false }]);
+          });
+        });
+
+        it('should not identify shadowed aliased present named hook call', () => {
+          testComponentsDetect({
+            code: `import { useState as useStateAlternative } from 'react'
+            function useColor() {
+              function useStateAlternative() {
+                return null
+              }
+              return useStateAlternative()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node, ['useState']),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: false }]);
+          });
+        });
+
+        it('should identify React hook call', () => {
+          testComponentsDetect({
+            code: `import React from 'react'
+            function useColor() {
+              return React.useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: true }]);
+          });
+        });
+
+        it('should identify aliased React hook call', () => {
+          testComponentsDetect({
+            code: `import ReactAlternative from 'react'
+            function useColor() {
+              return ReactAlternative.useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: true }]);
+          });
+        });
+
+        it('should not identify shadowed React hook call', () => {
+          testComponentsDetect({
+            code: `import React from 'react'
+            function useColor() {
+              const React = {
+                useState: () => null
+              }
+              return React.useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: false }]);
+          });
+        });
+
+        it('should identify present named hook call', () => {
+          testComponentsDetect({
+            code: `import { useState } from 'react'
+            function useColor() {
+              return useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node, ['useState']),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: true }]);
+          });
+        });
+
+        it('should identify present named React hook call', () => {
+          testComponentsDetect({
+            code: `import React from 'react'
+            function useColor() {
+              return React.useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node, ['useState']),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: true }]);
+          });
+        });
+
+        it('should not identify missing named hook call', () => {
+          testComponentsDetect({
+            code: `import { useState } from 'react'
+            function useColor() {
+              return useState()
+            }`,
+          }, {
+            CallExpression: (node, _context, _components, util) => util.isReactHookCall(node, ['useRef']),
+          }, (_components, instructionResults) => {
+            assert.deepEqual(instructionResults, [{ type: 'CallExpression', result: false }]);
+          });
+        });
+      });
+    });
+
+    describe('testComponentsDetect', () => {
+      it('should log Program:exit instruction', () => {
+        testComponentsDetect({
+          code: '',
+        }, {
+          'Program:exit': () => true,
+        }, (_components, instructionResults) => {
+          assert.deepEqual(instructionResults, [{ type: 'Program:exit', result: true }]);
+        });
+      });
+    });
   });
 });