noAccumulatingSpread

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/performance/noAccumulatingSpread`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). ## How to configure ```json title="biome.json" { "linter": { "rules": { "performance": { "noAccumulatingSpread": "error" } } } }

## Description
Disallow the use of spread (`...`) syntax on accumulators.

Spread syntax allows an iterable to be expanded into its individual elements.

Spread syntax should be avoided on accumulators (like those in `.reduce`)
because it causes a time complexity of `O(n^2)` instead of `O(n)`.

Source: https://prateeksurana.me/blog/why-using-object-spread-with-reduce-bad-idea/

## Examples

### Invalid

```js
var a = ['a', 'b', 'c'];
a.reduce((acc, val) => [...acc, val], []);

<pre class="language-text"><code class="language-text">code-block.js:2:25 <a href="https://biomejs.dev/linter/rules/no-accumulating-spread">lint/performance/noAccumulatingSpread</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠ Avoid the use of spread (`...`) syntax on accumulators. 1 │ var a = ['a', 'b', 'c']; > 2 │ a.reduce((acc, val) => [...acc, val], []); │ ^^^^^^ 3 │ ℹ Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`. ℹ Consider methods such as .splice or .push instead. </code></pre>

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => {return [...acc, val];}, []);

<pre class="language-text"><code class="language-text">code-block.js:2:33 <a href="https://biomejs.dev/linter/rules/no-accumulating-spread">lint/performance/noAccumulatingSpread</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠ Avoid the use of spread (`...`) syntax on accumulators. 1 │ var a = ['a', 'b', 'c']; > 2 │ a.reduce((acc, val) => {return [...acc, val];}, []); │ ^^^^^^ 3 │ ℹ Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`. ℹ Consider methods such as .splice or .push instead. </code></pre>

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => ({...acc, [val]: val}), {});

<pre class="language-text"><code class="language-text">code-block.js:2:26 <a href="https://biomejs.dev/linter/rules/no-accumulating-spread">lint/performance/noAccumulatingSpread</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠ Avoid the use of spread (`...`) syntax on accumulators. 1 │ var a = ['a', 'b', 'c']; > 2 │ a.reduce((acc, val) => ({...acc, [val]: val}), {}); │ ^^^^^^ 3 │ ℹ Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`. ℹ Consider methods such as .splice or .push instead. </code></pre>

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => {return Object.assign([], acc, val);}, []);

<pre class="language-text"><code class="language-text">code-block.js:2:32 <a href="https://biomejs.dev/linter/rules/no-accumulating-spread">lint/performance/noAccumulatingSpread</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⚠ Avoid the use of Object.assign on accumulators. 1 │ var a = ['a', 'b', 'c']; > 2 │ a.reduce((acc, val) => {return Object.assign([], acc, val);}, []); │ ^^^^^^^^^^^^^ 3 │ ℹ Spread syntax should be avoided on accumulators (like those in `.reduce`) because it causes a time complexity of `O(n^2)`. ℹ Consider methods such as .splice or .push instead. </code></pre>

Valid

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => {acc.push(val); return acc}, []);

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => Object.assign(acc, val), []);

var a = ['a', 'b', 'c'];
a.reduce((acc, val) => {return Object.assign(acc, val);}, []);

</TabItem> </Tabs>

Valid

Related links