From 5340e9dfc6b6473d36fb6e5ea80f073f6085d195 Mon Sep 17 00:00:00 2001
From: Alan Orozco <alanorozco@users.noreply.github.com>
Date: Wed, 8 Sep 2021 16:02:36 -0700
Subject: [PATCH] [Fix] `jsx-uses-vars`: ignore lowercase tag names

Fixes https://github.com/eslint/eslint/issues/15040
---
 CHANGELOG.md                     |  2 ++
 lib/rules/jsx-uses-vars.js       |  7 +++++++
 tests/lib/rules/jsx-uses-vars.js | 19 +++++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cbd453efd6..243f656964 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/lib/rules/jsx-uses-vars.js b/lib/rules/jsx-uses-vars.js
index 2ccdc5d360..ac94789a38 100644
--- a/lib/rules/jsx-uses-vars.js
+++ b/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;
diff --git a/tests/lib/rules/jsx-uses-vars.js b/tests/lib/rules/jsx-uses-vars.js
index ce02d7fc29..1b2e0d0561 100644
--- a/tests/lib/rules/jsx-uses-vars.js
+++ b/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.'}]
     }
   ]
 });