fixup! [New] Symmetric useState hook variable names

jsx-eslint · Dec 23, 2021 · 72e3f64 · 72e3f64
1 parent 0eba9ec
commit 72e3f64
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -132,7 +132,7 @@ Enable the rules that you would like to use.
 |  |  | [react/forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md) | Forbid using another component's propTypes |
 |  |  | [react/forbid-prop-types](docs/rules/forbid-prop-types.md) | Forbid certain propTypes |
 |  | 🔧 | [react/function-component-definition](docs/rules/function-component-definition.md) | Standardize the way function component get defined |
-|  | 🔧 | [react/hook-use-state](docs/rules/hook-use-state.md) | Ensure symmetric naming of useState hook value and setter variables |
+|  |  | [react/hook-use-state](docs/rules/hook-use-state.md) | Ensure symmetric naming of useState hook value and setter variables |
 |  |  | [react/no-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md) | Reports when this.state is accessed within setState |
 |  |  | [react/no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md) | Prevent adjacent inline elements not separated by whitespace. |
 |  |  | [react/no-array-index-key](docs/rules/no-array-index-key.md) | Prevent usage of Array index in keys |

diff --git a/docs/rules/hook-use-state.md b/docs/rules/hook-use-state.md
@@ -1,7 +1,5 @@
 # Ensure destructuring and symmetric naming of useState hook value and setter variables (react/hook-use-state)
 
-**Fixable:** In some cases, this rule is automatically fixable using the `--fix` flag on the command line.
-
 ## Rule Details
 
 This rule checks whether the value and setter variables destructured from a `React.useState()` call are named symmetrically.

diff --git a/lib/rules/hook-use-state.js b/lib/rules/hook-use-state.js
@@ -15,7 +15,6 @@ const report = require('../util/report');
 
 const messages = {
   useStateErrorMessage: 'useState call is not destructured into value + setter pair',
-
 };
 
 module.exports = {
@@ -26,7 +25,6 @@ module.exports = {
       recommended: false,
       url: docsUrl('hook-use-state'),
     },
-    fixable: 'code',
     messages,
     schema: [],
     type: 'suggestion',
@@ -112,29 +110,30 @@ module.exports = {
           const useMemoReactImportSpecifier = namedReactImports
             && namedReactImports.find((specifier) => specifier.imported.name === 'useMemo');
 
+          let useMemoCode;
+          if (useMemoReactImportSpecifier) {
+            useMemoCode = useMemoReactImportSpecifier.local.name;
+          } else if (defaultReactImportName) {
+            useMemoCode = `${defaultReactImportName}.useMemo`;
+          } else {
+            useMemoCode = 'useMemo';
+          }
+
           suggestions.unshift({
             desc: 'Replace useState call with useMemo',
-            fix: (fixer) => {
-              const useMemoCode = (useMemoReactImportSpecifier
-                && useMemoReactImportSpecifier.local.name)
-              || (defaultReactImportName
-                && `${defaultReactImportName}.useMemo`)
-              || 'useMemo';
-
-              return [
-                // Add useMemo import, if necessary
-                useStateReactImportSpecifier
+            fix: (fixer) => [
+              // Add useMemo import, if necessary
+              useStateReactImportSpecifier
                   && (!useMemoReactImportSpecifier || defaultReactImportName)
                   && fixer.insertTextAfter(useStateReactImportSpecifier, ', useMemo'),
-                // Convert single-value destructure to simple assignment
-                fixer.replaceTextRange(node.parent.id.range, valueVariableName),
-                // Convert useState call to useMemo + arrow function + dependency array
-                fixer.replaceTextRange(
-                  node.range,
-                  `${useMemoCode}(() => ${context.getSourceCode().getText(node.arguments[0])}, [])`
-                ),
-              ].filter(Boolean);
-            },
+              // Convert single-value destructure to simple assignment
+              fixer.replaceTextRange(node.parent.id.range, valueVariableName),
+              // Convert useState call to useMemo + arrow function + dependency array
+              fixer.replaceTextRange(
+                node.range,
+                `${useMemoCode}(() => ${context.getSourceCode().getText(node.arguments[0])}, [])`
+              ),
+            ].filter(Boolean),
           });
         }