question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

New Rule: no-unnecessary-spread - a rule to prevent syntactically unnecessary object, array and JSX attribute spreads

See original GitHub issue

Rule details

This rule would detect provably useless object literal, array literal, and JSX attribute spreads

Related ECMAScript feature

It’s not new, quite old - but I thought there was high value in this check based on my anecdotal experience across several large codebases.

What type of rule is this?

Warns about a potential problem

Example bad code

const x = { ...{} };
const y = { ...{ foo: 1 } };
const z = {
  a: 1,
  b: 2,
  ...{
    c: 3,
    d: 4
  },
  e: 5,
};

const a = [ ...[] ];
const b = [ ...[1] ];
const c = [
  1,
  2,
  ...[
    3,
    4
  ],
  5,
];

const j = <div {...{}} />;
const k = <div {...{ foo: 1 }} />;
const l = <div
  a={1}
  b={2}
  {...{
    c: 3,
    d: 4
  }}
  e={5}
/>;
Good versions of the above "bad" code
const x = { };
const y = { foo: 1 };
const z = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
  e: 5,
};

const a = [ ];
const b = [ 1 ];
const c = [
  1,
  2,
  3,
  4,
  5,
];

const j = <div />;
const k = <div foo={1} />;
const l = <div
  a={1}
  b={2}
  c={3}
  d={4}
  e={5}
/>;

Why should this rule be in the core instead of a plugin?

I’ve worked across a few codebases and found this issue occurs at an alarmingly high rate in each codebase. I think it would be of great benefit to the community if it was part of the core rules and part of the recommended set to help cleanup obviously and syntactically unnecessary, dead code.

Participation

  • I am willing to submit a pull request to implement this rule.

Additional comments

I have a prototype of the rule ready to go that I’ve tested on a large codebase (10s of thousands of files) and it includes a fixer that handles the majority of cases (in this codebase 97% of the cases were auto-fixable)

Issue Analytics

  • State:open
  • Created 9 months ago
  • Reactions:1
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
aladdin-addcommented, Dec 22, 2022

I’m 👍 to the rule.

0reactions
aladdin-addcommented, Dec 26, 2022

yes, I’m 100% supportive if the syntax is new added. imho, the purpose of our policy change is to provide only rules that are sufficiently general(and useful), and I believe this proposal is well met. maybe we could make an exception here?

Read more comments on GitHub >

github_iconTop Results From Across the Web

JSX In Depth - React
Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or...
Read more >
React Anti-Pattern: JSX Spread Attributes | by John Tucker
Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or...
Read more >
ESLint rules that made me a better React developer - Medium
The following are some of the most useful ESLint rules that I have found to make me a better React developer by writing...
Read more >
12 essential ESLint rules for React - LogRocket Blog
ESLint has a comprehensive set of rules for JavaScript code that cover stylistic choices and prevent common bugs. Using ESLint alone will ...
Read more >
React props: Should I pass the object or its properties? Does it ...
I personally try to avoid passing whole objects if it's not needed. It's like the spread operator where there can be any property...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found