From cab69435804137221cdb6fc6920c877e64e2ab87 Mon Sep 17 00:00:00 2001
From: Duncan Beevers <duncan@dweebd.com>
Date: Mon, 14 Mar 2022 13:48:17 -0700
Subject: [PATCH] [Fix] `hook-use-state`: Allow UPPERCASE setState setter
 prefixes

---
 CHANGELOG.md                      |  5 +++++
 lib/rules/hook-use-state.js       | 18 +++++++++++++-----
 tests/lib/rules/hook-use-state.js | 27 +++++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99e900f75b..8f8b6e7ac7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Fixed
+* [`hook-use-state`]: Allow UPPERCASE setState setter prefixes ([#3244][] @duncanbeevers)
+
+[#3244]: https://github.com/yannickcr/eslint-plugin-react/pull/3244
+
 ## [7.29.4] - 2022.03.13
 
 ### Fixed
diff --git a/lib/rules/hook-use-state.js b/lib/rules/hook-use-state.js
index 6bfb604ae8..f0826ac64b 100644
--- a/lib/rules/hook-use-state.js
+++ b/lib/rules/hook-use-state.js
@@ -66,13 +66,17 @@ module.exports = {
         ? setterVariable.name
         : undefined;
 
-      const expectedSetterVariableName = valueVariableName ? (
-        `set${valueVariableName.charAt(0).toUpperCase()}${valueVariableName.slice(1)}`
-      ) : undefined;
+      const caseCandidateMatch = valueVariableName ? valueVariableName.match(/(^[a-z]+)(.*)/) : undefined;
+      const upperCaseCandidatePrefix = caseCandidateMatch ? caseCandidateMatch[1] : undefined;
+      const caseCandidateSuffix = caseCandidateMatch ? caseCandidateMatch[2] : undefined;
+      const expectedSetterVariableNames = upperCaseCandidatePrefix ? [
+        `set${upperCaseCandidatePrefix.charAt(0).toUpperCase()}${upperCaseCandidatePrefix.slice(1)}${caseCandidateSuffix}`,
+        `set${upperCaseCandidatePrefix.toUpperCase()}${caseCandidateSuffix}`,
+      ] : [];
 
       const isSymmetricGetterSetterPair = valueVariable
         && setterVariable
-        && setterVariableName === expectedSetterVariableName
+        && expectedSetterVariableNames.indexOf(setterVariableName) !== -1
         && variableNodes.length === 2;
 
       if (!isSymmetricGetterSetterPair) {
@@ -80,9 +84,13 @@ module.exports = {
           {
             desc: 'Destructure useState call into value + setter pair',
             fix: (fixer) => {
+              if (expectedSetterVariableNames.length === 0) {
+                return;
+              }
+
               const fix = fixer.replaceTextRange(
                 node.parent.id.range,
-                `[${valueVariableName}, ${expectedSetterVariableName}]`
+                `[${valueVariableName}, ${expectedSetterVariableNames[0]}]`
               );
 
               return fix;
diff --git a/tests/lib/rules/hook-use-state.js b/tests/lib/rules/hook-use-state.js
index a68f952eb8..9f127f2a8e 100644
--- a/tests/lib/rules/hook-use-state.js
+++ b/tests/lib/rules/hook-use-state.js
@@ -35,6 +35,33 @@ const tests = {
         }
       `,
     },
+    {
+      code: `
+        import { useState } from 'react'
+        function useRGB() {
+          const [rgb, setRGB] = useState()
+          return [rgb, setRGB]
+        }
+      `,
+    },
+    {
+      code: `
+        import { useState } from 'react'
+        function useRGBValue() {
+          const [rgbValue, setRGBValue] = useState()
+          return [rgbValue, setRGBValue]
+        }
+      `,
+    },
+    {
+      code: `
+        import { useState } from 'react'
+        function useCustomColorValue() {
+          const [customColorValue, setCustomColorValue] = useState()
+          return [customColorValue, setCustomColorValue]
+        }
+      `,
+    },
     {
       code: `
         import { useState } from 'react'