Revert "[Fix] destructuring-assignment: Handle destructuring of useContext in SFC"

 - [Tests] `destructuring-assignment`: Add more modern context cases

This reverts commit 523db20 / #2797

Fixes #3536.

Author: 102

CHANGELOG.md

@@ -20,11 +20,13 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`display-name`], [`prop-types`]: when checking for a capitalized name, ignore underscores entirely ([#3560][] @ljharb)
 * [`no-unused-state`]: avoid crashing on a class field function with destructured state ([#3568][] @ljharb)
 * [`no-unused-prop-types`]: allow using spread with object expression in jsx ([#3570][] @akulsr0)
+* Revert "[`destructuring-assignment`]: Handle destructuring of useContext in SFC" ([#3583][] [#2797][] @102)
 
 ### Changed
 * [Docs] [`jsx-newline`], [`no-unsafe`], [`static-property-placement`]: Fix code syntax highlighting ([#3563][] @nbsp1221)
 * [readme] resore configuration URL ([#3582][] @gokaygurcan)
 
+[#3583]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3583
 [#3582]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3582
 [#3570]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3570
 [#3568]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3568

lib/rules/destructuring-assignment.js

@@ -8,7 +8,6 @@ const Components = require('../util/Components');
 const docsUrl = require('../util/docsUrl');
 const isAssignmentLHS = require('../util/ast').isAssignmentLHS;
 const report = require('../util/report');
-const testReactVersion = require('../util/version').testReactVersion;
 
 const DEFAULT_OPTION = 'always';
 
@@ -95,8 +94,6 @@ module.exports = {
     const destructureInSignature = (context.options[1] && context.options[1].destructureInSignature) || 'ignore';
     const sfcParams = createSFCParams();
 
-    // set to save renamed var of useContext
-    const contextSet = new Set();
     /**
      * @param {ASTNode} node We expect either an ArrowFunctionExpression,
      *   FunctionDeclaration, or FunctionExpression
@@ -131,7 +128,7 @@ module.exports = {
     function handleSFCUsage(node) {
       const propsName = sfcParams.propsName();
       const contextName = sfcParams.contextName();
-      // props.aProp
+      // props.aProp || context.aProp
       const isPropUsed = (
         (propsName && node.object.name === propsName)
           || (contextName && node.object.name === contextName)
@@ -145,21 +142,6 @@ module.exports = {
           },
         });
       }
-
-      // const foo = useContext(aContext);
-      // foo.aProp
-      const isContextUsed = contextSet.has(node.object.name) && !isAssignmentLHS(node);
-      const optional = node.optional
-        // the below is for the old typescript-eslint parser
-        || context.getSourceCode().getText(node).slice(node.object.range[1] - node.range[0], node.object.range[1] - node.range[0] + 1) === '?';
-      if (isContextUsed && configuration === 'always' && !optional) {
-        report(context, messages.useDestructAssignment, 'useDestructAssignment', {
-          node,
-          data: {
-            type: node.object.name,
-          },
-        });
-      }
     }
 
     function isInClassProperty(node) {
@@ -194,9 +176,8 @@ module.exports = {
       }
     }
 
-    const hasHooks = testReactVersion(context, '>= 16.9');
-
     return {
+
       FunctionDeclaration: handleStatelessComponent,
 
       ArrowFunctionExpression: handleStatelessComponent,
@@ -231,31 +212,13 @@ module.exports = {
         const SFCComponent = components.get(context.getScope(node).block);
 
         const destructuring = (node.init && node.id && node.id.type === 'ObjectPattern');
-        const identifier = (node.init && node.id && node.id.type === 'Identifier');
         // let {foo} = props;
-        const destructuringSFC = destructuring && node.init.name === 'props';
-        // let {foo} = useContext(aContext);
-        const destructuringUseContext = hasHooks && destructuring && node.init.callee && node.init.callee.name === 'useContext';
-        // let foo = useContext(aContext);
-        const assignUseContext = hasHooks && identifier && node.init.callee && node.init.callee.name === 'useContext';
+        const destructuringSFC = destructuring && (node.init.name === 'props' || node.init.name === 'context');
         // let {foo} = this.props;
         const destructuringClass = destructuring && node.init.object && node.init.object.type === 'ThisExpression' && (
           node.init.property.name === 'props' || node.init.property.name === 'context' || node.init.property.name === 'state'
         );
 
-        if (SFCComponent && assignUseContext) {
-          contextSet.add(node.id.name);
-        }
-
-        if (SFCComponent && destructuringUseContext && configuration === 'never') {
-          report(context, messages.noDestructAssignment, 'noDestructAssignment', {
-            node,
-            data: {
-              type: node.init.callee.name,
-            },
-          });
-        }
-
         if (SFCComponent && destructuringSFC && configuration === 'never') {
           report(context, messages.noDestructAssignment, 'noDestructAssignment', {
             node,

tests/lib/rules/destructuring-assignment.js

@@ -374,6 +374,18 @@ ruleTester.run('destructuring-assignment', rule, {
       code: `
         import { useContext } from 'react';
 
+        const MyComponent = (props) => {
+          const {foo} = useContext(aContext);
+          return <div>{foo}</div>
+        };
+      `,
+      options: ['always'],
+      settings: { react: { version: '16.9.0' } },
+    },
+    {
+      code: `
+        import { useContext } from 'react';
+
         const MyComponent = (props) => {
           const foo = useContext(aContext);
           return <div>{foo.test}</div>
@@ -382,6 +394,18 @@ ruleTester.run('destructuring-assignment', rule, {
       options: ['never'],
       settings: { react: { version: '16.9.0' } },
     },
+    {
+      code: `
+        import { useContext } from 'react';
+
+        const MyComponent = (props) => {
+          const foo = useContext(aContext);
+          return <div>{foo.test}</div>
+        };
+      `,
+      options: ['always'],
+      settings: { react: { version: '16.9.0' } },
+    },
     {
       code: `
         const MyComponent = (props) => {
@@ -860,36 +884,6 @@ ruleTester.run('destructuring-assignment', rule, {
         `,
         features: ['ts', 'no-babel'],
       },
-    ] : [],
-    {
-      code: `
-        import { useContext } from 'react';
-
-        const MyComponent = (props) => {
-          const foo = useContext(aContext);
-          return <div>{foo.test}</div>
-        };
-      `,
-      options: ['always'],
-      settings: { react: { version: '16.9.0' } },
-      errors: [
-        { message: 'Must use destructuring foo assignment' },
-      ],
-    },
-    {
-      code: `
-        import { useContext } from 'react';
-
-        const MyComponent = (props) => {
-          const {foo} = useContext(aContext);
-          return <div>{foo}</div>
-        };
-      `,
-      options: ['never'],
-      settings: { react: { version: '16.9.0' } },
-      errors: [
-        { message: 'Must never use destructuring useContext assignment' },
-      ],
-    }
+    ] : []
   )),
 });