avoid confusion when setter is destructured accidentally

jsx-eslint · Oct 9, 2022 · 54f0f84 · 54f0f84
1 parent 9e743a2
commit 54f0f84
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/lib/rules/hook-use-state.js b/lib/rules/hook-use-state.js
@@ -75,9 +75,9 @@ module.exports = {
         const variableNodes = node.parent.id.elements;
         const valueVariable = variableNodes[0];
         const setterVariable = variableNodes[1];
-        const isValueDestructuring = isNodeDestructuring(valueVariable);
+        const isOnlyValueDestructuring = isNodeDestructuring(valueVariable) && !isNodeDestructuring(setterVariable);
 
-        if (allowDestructuredState && isValueDestructuring) {
+        if (allowDestructuredState && isOnlyValueDestructuring) {
           return;
         }
 
@@ -168,7 +168,7 @@ module.exports = {
             });
           }
 
-          if (isValueDestructuring) {
+          if (isOnlyValueDestructuring) {
             report(
               context,
               messages.useStateErrorMessageOrAddOption,

diff --git a/tests/lib/rules/hook-use-state.js b/tests/lib/rules/hook-use-state.js
@@ -538,6 +538,19 @@ const tests = {
         },
       ],
     },
+    {
+      code: `
+        import { useState } from 'react';
+
+        const [{foo, bar, baz}, {setFooBarBaz}] = useState({foo: "bbb", bar: "aaa", baz: "qqq"})
+      `,
+      options: [{ allowDestructuredState: true }],
+      errors: [
+        {
+          message: 'useState call is not destructured into value + setter pair',
+        },
+      ],
+    },
     {
       code: `
         import { useState } from 'react'