[Fix] hook-use-state: Allow UPPERCASE setState setter prefixes

jsx-eslint · Mar 14, 2022 · cab6943 · cab6943
1 parent 73ad445
commit cab6943
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git 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
@@ -66,23 +66,31 @@ 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) {
         const suggestions = [
           {
             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
@@ -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'