fix: Mark JSXIdentifier has missing dependency

Author: eps1lon

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

@@ -7947,13 +7947,31 @@ const testsTypescriptEslintParserV4 = {
     // It doesn't use any explicit types but any JS is still valid TS.
     {
       code: normalizeIndent`
-        export const Foo = ({ Component }) => {
+        function Foo({ Component }) {
           React.useEffect(() => {
             console.log(<Component />);
           }, []);
         };
       `,
-      errors: [{message: ''}],
+      errors: [
+        {
+          message:
+            "React Hook React.useEffect has a missing dependency: 'Component'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [Component]',
+              output: normalizeIndent`
+              function Foo({ Component }) {
+                React.useEffect(() => {
+                  console.log(<Component />);
+                }, [Component]);
+              };
+            `,
+            },
+          ],
+        },
+      ],
     },
   ],
 };

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

@@ -1622,7 +1622,7 @@ function markNode(node, optionalChains, result) {
  * Otherwise throw.
  */
 function analyzePropertyChain(node, optionalChains) {
-  if (node.type === 'Identifier') {
+  if (node.type === 'Identifier' || node.type === 'JSXIdentifier') {
     const result = node.name;
     if (optionalChains) {
       // Mark as required.
@@ -1779,7 +1779,7 @@ function isNodeLike(val) {
 
 function isSameIdentifier(a, b) {
   return (
-    a.type === 'Identifier' &&
+    (a.type === 'Identifier' || a.type === 'JSXIdentifier') &&
     a.name === b.name &&
     a.range[0] === b.range[0] &&
     a.range[1] === b.range[1]