fixup! [New] Symmetric useState hook variable names

Author: duncanbeevers

lib/rules/hook-use-state.js

@@ -15,6 +15,7 @@ const report = require('../util/report');
 
 const messages = {
   useStateErrorMessage: 'useState call is not destructured into value + setter pair',
+
 };
 
 module.exports = {
@@ -136,75 +137,65 @@ module.exports = {
         && variableNodes.length === 2;
 
       if (!isSymmetricGetterSetterPair) {
+        const suggestions = [
+          {
+            desc: 'Destructure useState call into value + setter pair',
+            fix: (fixer) => {
+              const fix = fixer.replaceTextRange(
+                node.parent.id.range,
+                `[${valueVariableName}, ${expectedSetterVariableName}]`
+              );
+
+              return fix;
+            },
+          },
+        ];
+
         const isSingleGetter = valueVariable && variableNodes.length === 1;
         const isUseStateCalledWithSingleArgument = node.arguments.length === 1;
         if (isSingleGetter && isUseStateCalledWithSingleArgument) {
           const useMemoReactImportSpecifier = namedReactImports ? namedReactImports.find((specifier) => specifier.imported.name === 'useMemo') : undefined;
           const sourceCode = context.getSourceCode();
           const useStateArgumentSourceCode = sourceCode.getText(node.arguments[0]);
 
-          report(
-            context,
-            messages.useStateErrorMessage,
-            'useStateErrorMessage',
-            {
-              node: node.parent.id,
-              suggest: [
-                {
-                  desc: 'Replace useState call with useMemo',
-                  fix: (fixer) => {
-                    const useMemoImportName = useMemoReactImportSpecifier && useMemoReactImportSpecifier.local.name;
-
-                    const useMemoReference = useMemoImportName
-                      || (defaultReactImportName
-                      && `${defaultReactImportName}.useMemo`)
-                      || 'useMemo';
-
-                    const fixes = [
-                      // 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,
-                        `${useMemoReference}(() => ${useStateArgumentSourceCode}, [])`
-                      ),
-                    ].filter(Boolean);
-
-                    return fixes;
-                  },
-                },
-                {
-                  desc: 'Destructure useState call into value + setter pair',
-                  fix: (fixer) => {
-                    const fix = fixer.replaceTextRange(
-                      node.parent.id.range,
-                      `[${valueVariableName}, ${expectedSetterVariableName}]`
-                    );
-
-                    return fix;
-                  },
-                },
-              ].filter(Boolean),
-            }
-          );
-        } else {
-          report(
-            context,
-            messages.useStateErrorMessage,
-            'useStateErrorMessage',
-            {
-              node: node.parent.id,
-              fix: valueVariableName ? (fixer) => fixer.replaceTextRange(
-                [node.parent.id.range[0], node.parent.id.range[1]],
-                `[${valueVariableName}, ${expectedSetterVariableName}]`
-              ) : undefined,
-            }
-          );
+          suggestions.unshift({
+            desc: 'Replace useState call with useMemo',
+            fix: (fixer) => {
+              const useMemoImportName = useMemoReactImportSpecifier && useMemoReactImportSpecifier.local.name;
+
+              const useMemoReference = useMemoImportName
+                || (defaultReactImportName
+                && `${defaultReactImportName}.useMemo`)
+                || 'useMemo';
+
+              const fixes = [
+                // 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,
+                  `${useMemoReference}(() => ${useStateArgumentSourceCode}, [])`
+                ),
+              ].filter(Boolean);
+
+              return fixes;
+            },
+          });
         }
+
+        report(
+          context,
+          messages.useStateErrorMessage,
+          'useStateErrorMessage',
+          {
+            node: node.parent.id,
+            suggest: suggestions,
+          }
+        );
       }
     },
   })),

tests/lib/rules/hook-use-state.js

@@ -230,11 +230,15 @@ const tests = {
       }`,
       errors: [{
         message: 'useState call is not destructured into value + setter pair',
-      }],
-      output: `import { useState } from 'react'
+        suggestions: [
+          {
+            output: `import { useState } from 'react'
       export default function useColor() {
         const [color, setColor] = useState()
       }`,
+          },
+        ],
+      }],
     },
     {
       code: `import { useState } from 'react'
@@ -319,12 +323,14 @@ const tests = {
       }`,
       errors: [{
         message: 'useState call is not destructured into value + setter pair',
-      }],
-      output: `import { useState } from 'react'
+        suggestions: [{
+          output: `import { useState } from 'react'
       export default function useColor() {
         const [color, setColor] = useState()
         return [color]
       }`,
+        }],
+      }],
     },
     {
       code: `import { useState } from 'react'
@@ -334,12 +340,14 @@ const tests = {
       }`,
       errors: [{
         message: 'useState call is not destructured into value + setter pair',
-      }],
-      output: `import { useState } from 'react'
+        suggestions: [{
+          output: `import { useState } from 'react'
       export default function useColor() {
         const [color, setColor] = useState()
         return [color, setColor]
       }`,
+        }],
+      }],
     },
     {
       code: `import { useState } from 'react'
@@ -353,27 +361,33 @@ const tests = {
       const [color, setFlavor, extraneous] = useState()`,
       errors: [{
         message: 'useState call is not destructured into value + setter pair',
-      }],
-      output: `import { useState } from 'react'
+        suggestions: [{
+          output: `import { useState } from 'react'
       const [color, setColor] = useState()`,
+        }],
+      }],
     },
     {
       code: `import { useState } from 'react'
       const [color, setFlavor] = useState()`,
       errors: [{
         message: 'useState call is not destructured into value + setter pair',
-      }],
-      output: `import { useState } from 'react'
+        suggestions: [{
+          output: `import { useState } from 'react'
       const [color, setColor] = useState()`,
+        }],
+      }],
     },
     {
       code: `import { useState } from 'react'
       const [color, setFlavor] = useState<string>()`,
       errors: [{
         message: 'useState call is not destructured into value + setter pair',
-      }],
-      output: `import { useState } from 'react'
+        suggestions: [{
+          output: `import { useState } from 'react'
       const [color, setColor] = useState<string>()`,
+        }],
+      }],
       features: ['ts', 'no-babel-old'],
     },
     {
@@ -384,12 +398,14 @@ const tests = {
       }`,
       errors: [{
         message: 'useState call is not destructured into value + setter pair',
-      }],
-      output: `import { useState } from 'react'
+        suggestions: [{
+          output: `import { useState } from 'react'
       export default function useColor() {
         const [color, setColor] = useState<string>('#ffffff')
         return [color, setFlavor]
       }`,
+        }],
+      }],
       features: ['ts', 'no-babel-old'],
     },
     {
@@ -400,12 +416,14 @@ const tests = {
       }`,
       errors: [{
         message: 'useState call is not destructured into value + setter pair',
-      }],
-      output: `import React from 'react'
+        suggestions: [{
+          output: `import React from 'react'
       export default function useColor() {
         const [color, setColor] = React.useState<string>('#ffffff')
         return [color, setFlavor]
       }`,
+        }],
+      }],
       features: ['ts', 'no-babel-old'],
     },
   ]),