[New] add jsx-props-no-spread-multi

CHANGELOG.md

@@ -5,12 +5,16 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+## Added
+* add [`jsx-props-no-spread-multi`] ([#3724][] @SimonSchick)
+
 ### Fixed
 * [`prop-types`]: null-check rootNode before calling getScope ([#3762][] @crnhrv)
 * [`boolean-prop-naming`]: avoid a crash with a spread prop ([#3733][] @ljharb)
 * [`jsx-boolean-value`]: `assumeUndefinedIsFalse` with `never` must not allow explicit `true` value ([#3757][] @6uliver)
 * [`no-object-type-as-default-prop`]: enable rule for components with many parameters ([#3768][] @JulienR1)
 
+[#3724]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3724
 [#3768]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3768
 [#3762]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3762
 [#3757]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3757
@@ -4246,6 +4250,7 @@ If you're still not using React 15 you can keep the old behavior by setting the
 [`jsx-one-expression-per-line`]: docs/rules/jsx-one-expression-per-line.md
 [`jsx-pascal-case`]: docs/rules/jsx-pascal-case.md
 [`jsx-props-no-multi-spaces`]: docs/rules/jsx-props-no-multi-spaces.md
+[`jsx-props-no-spread-multi`]: docs/rules/jsx-props-no-spread-multi.md
 [`jsx-props-no-spreading`]: docs/rules/jsx-props-no-spreading.md
 [`jsx-props-no-spreading`]: docs/rules/jsx-props-no-spreading.md
 [`jsx-sort-default-props`]: docs/rules/jsx-sort-default-props.md

README.md

@@ -338,6 +338,7 @@ module.exports = [
 | [jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md)                     | Require one JSX element per line                                                                                                             |    |    | 🔧 |    |    |
 | [jsx-pascal-case](docs/rules/jsx-pascal-case.md)                                             | Enforce PascalCase for user-defined JSX components                                                                                           |    |    |    |    |    |
 | [jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md)                         | Disallow multiple spaces between inline JSX props                                                                                            |    |    | 🔧 |    |    |
+| [jsx-props-no-spread-multi](docs/rules/jsx-props-no-spread-multi.md)                         | Disallow JSX prop spreading the same identifier multiple times                                                                               |    |    |    |    |    |
 | [jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md)                               | Disallow JSX prop spreading                                                                                                                  |    |    |    |    |    |
 | [jsx-sort-default-props](docs/rules/jsx-sort-default-props.md)                               | Enforce defaultProps declarations alphabetical sorting                                                                                       |    |    |    |    | ❌  |
 | [jsx-sort-props](docs/rules/jsx-sort-props.md)                                               | Enforce props alphabetical sorting                                                                                                           |    |    | 🔧 |    |    |

docs/rules/jsx-props-no-spread-multi.md

@@ -0,0 +1,26 @@
+# Disallow JSX prop spreading the same identifier multiple times (`react/jsx-props-no-spread-multi`)
+
+<!-- end auto-generated rule header -->
+
+Enforces that any unique expression is only spread once.
+Generally spreading the same expression twice is an indicator of a mistake since any attribute between the spreads may be overridden when the intent was not to.
+Even when that is not the case this will lead to unnecessary computations being performed.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<App {...props} myAttr="1" {...props} />
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<App myAttr="1" {...props} />
+<App {...props} myAttr="1" />
+```
+
+## When Not To Use It
+
+When spreading the same expression multiple times yields different results.

lib/rules/index.js

@@ -50,6 +50,7 @@ module.exports = {
   'jsx-fragments': require('./jsx-fragments'),
   'jsx-props-no-multi-spaces': require('./jsx-props-no-multi-spaces'),
   'jsx-props-no-spreading': require('./jsx-props-no-spreading'),
+  'jsx-props-no-spread-multi': require('./jsx-props-no-spread-multi'),
   'jsx-sort-default-props': require('./jsx-sort-default-props'),
   'jsx-sort-props': require('./jsx-sort-props'),
   'jsx-space-before-closing': require('./jsx-space-before-closing'),

lib/rules/jsx-props-no-spread-multi.js

@@ -0,0 +1,53 @@
+/**
+ * @fileoverview Prevent JSX prop spreading the same expression multiple times
+ * @author Simon Schick
+ */
+
+'use strict';
+
+const docsUrl = require('../util/docsUrl');
+const report = require('../util/report');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const messages = {
+  noMultiSpreading: 'Spreading the same expression multiple times is forbidden',
+};
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow JSX prop spreading the same identifier multiple times',
+      category: 'Best Practices',
+      recommended: false,
+      url: docsUrl('jsx-props-no-spread-multi'),
+    },
+    messages,
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const spreads = node.attributes.filter(
+          (attr) => attr.type === 'JSXSpreadAttribute'
+          && attr.argument.type === 'Identifier'
+        );
+        if (spreads.length < 2) {
+          return;
+        }
+        // We detect duplicate expressions by their identifier
+        const identifierNames = new Set();
+        spreads.forEach((spread) => {
+          if (identifierNames.has(spread.argument.name)) {
+            report(context, messages.noMultiSpreading, 'noMultiSpreading', {
+              node: spread,
+            });
+          }
+          identifierNames.add(spread.argument.name);
+        });
+      },
+    };
+  },
+};

lib/types.d.ts

@@ -11,9 +11,10 @@ declare global {
   type JSXAttribute = ASTNode;
   type JSXElement = ASTNode;
   type JSXFragment = ASTNode;
+  type JSXOpeningElement = ASTNode;
   type JSXSpreadAttribute = ASTNode;
 
-  type Context = eslint.Rule.RuleContext
+  type Context = eslint.Rule.RuleContext;
 
   type TypeDeclarationBuilder = (annotation: ASTNode, parentName: string, seen: Set<typeof annotation>) => object;
 

tests/lib/rules/jsx-props-no-spread-multi.js

@@ -0,0 +1,71 @@
+/**
+ * @fileoverview Tests for jsx-props-no-spread-multi
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester;
+const rule = require('../../../lib/rules/jsx-props-no-spread-multi');
+
+const parsers = require('../../helpers/parsers');
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({ parserOptions });
+const expectedError = { messageId: 'noMultiSpreading' };
+
+ruleTester.run('jsx-props-no-spread-multi', rule, {
+  valid: parsers.all([
+    {
+      code: `
+        const a = {};
+        <App {...a} />
+      `,
+    },
+    {
+      code: `
+        const a = {};
+        const b = {};
+        <App {...a} {...b} />
+      `,
+    },
+  ]),
+
+  invalid: parsers.all([
+    {
+      code: `
+        const props = {};
+        <App {...props} {...props} />
+      `,
+      errors: [expectedError],
+    },
+    {
+      code: `
+        const props = {};
+        <div {...props} a="a" {...props} />
+      `,
+      errors: [expectedError],
+    },
+    {
+      code: `
+        const props = {};
+        <div {...props} {...props} {...props} />
+      `,
+      errors: [expectedError, expectedError],
+    },
+  ]),
+});