This rule raises an issue when the spread operator (…​) is used in cases where it provides no benefit, such as spreading array literals directly into arrays, spreading object literals into objects, or converting iterables to arrays when the target already accepts iterables.

Why is this an issue?

The spread operator (…​) is a powerful JavaScript feature for expanding arrays and objects. However, using it unnecessarily can make code harder to read and potentially less efficient.

There are several common patterns where spread syntax adds no value:

• Spreading literals: When you spread an array literal [item] directly into another array or function call, you can simply write the item directly.
• Redundant array conversion: Many JavaScript built-ins like Set, Map, Promise.all(), and Array.from() accept any iterable object, not just arrays. Converting an iterable to an array first using spread syntax is unnecessary.
• Iteration contexts: Language features like for…​of loops and yield* expressions work directly with iterables, so spreading them into arrays first is redundant.

These unnecessary uses of spread syntax can:

• Make code more verbose and harder to read
• Create unnecessary intermediate arrays, potentially impacting performance
• Obscure the intent of the code
• Add cognitive overhead for developers reading the code

What is the potential impact?

Using unnecessary spread syntax makes code less readable and may create performance overhead by creating intermediate arrays when they’re not needed. While the performance impact is typically minimal, the readability impact can be significant, especially in codebases with many such occurrences.

How to fix?

Remove unnecessary spread syntax when spreading array literals directly into arrays or function calls.

Non-compliant code example

const array = [firstElement, ...[secondElement], thirdElement]; // Noncompliant
foo(firstArgument, ...[secondArgument], thirdArgument); // Noncompliant

Compliant code example

const array = [firstElement, secondElement, thirdElement];
foo(firstArgument, secondArgument, thirdArgument);

Documentation

• eslint-plugin-unicorn - Rule no-useless-spread
• MDN - Spread syntax - Comprehensive guide to JavaScript spread syntax
• MDN - Iteration protocols - Understanding iterables and iterators in JavaScript