[Fix] jsx-uses-vars: ignore lowercase tag names

Fixes eslint/eslint#15040

Author: alanorozco

CHANGELOG.md

@@ -10,7 +10,9 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`prop-types`], `propTypes`: handle implicit `children` prop in react's generic types ([#3064][] @vedadeepta)
 * [`display-name`]: fix arrow function returning result of function call with JSX arguments being interpreted as component ([#3065][] @danielfinke)
 * [`jsx-no-target-blank`]: avoid crash on attr-only href ([#3066][] @ljharb @gaz77a)
+* [`jsx-uses-vars`]: ignore lowercase tag names ([#3070][] @alanorozco)
 
+[#3070]: https://github.com/yannickcr/eslint-plugin-react/pull/3070
 [#3066]: https://github.com/yannickcr/eslint-plugin-react/issue/3066
 [#3065]: https://github.com/yannickcr/eslint-plugin-react/pull/3065
 [#3064]: https://github.com/yannickcr/eslint-plugin-react/pull/3064

lib/rules/jsx-uses-vars.js

@@ -11,6 +11,9 @@ const docsUrl = require('../util/docsUrl');
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+const isTagNameRe = /^[a-z]/;
+const isTagName = (name) => isTagNameRe.test(name);
+
 module.exports = {
   meta: {
     docs: {
@@ -33,6 +36,10 @@ module.exports = {
         if (node.name.name) {
           // <Foo>
           name = node.name.name;
+          // Exclude lowercase tag names like <div>
+          if (isTagName(name)) {
+            return;
+          }
         } else if (node.name.object) {
           // <Foo...Bar>
           let parent = node.name.object;

tests/lib/rules/jsx-uses-vars.js

@@ -116,6 +116,18 @@ ruleTester.run('no-unused-vars', ruleNoUnusedVars, {
         };
         foo()
       `
+    }, {
+      code: `
+        /* eslint jsx-uses-vars: 1 */
+        var object;
+        React.render(<object.Tag />);
+      `
+    }, {
+      code: `
+        /* eslint jsx-uses-vars: 1 */
+        var object;
+        React.render(<object.tag />);
+      `
     }
   ],
   invalid: [
@@ -196,6 +208,13 @@ ruleTester.run('no-unused-vars', ruleNoUnusedVars, {
         line: 3
       }],
       parser: parsers.BABEL_ESLINT
+    }, {
+      code: `
+        /* eslint jsx-uses-vars: 1 */
+        var lowercase;
+        React.render(<lowercase />);
+      `,
+      errors: [{message: '\'lowercase\' is defined but never used.'}]
     }
   ]
 });