javascript - Why not to use splice with spread operator to remove item from an array in react?

Question

splice() mutates the original array and should be avoided. Instead, one good option is to use filter() which creates a new array so does not mutates the state. But I used to remove items from an array using splice() with spread operator.

removeItem = index => {
  const items = [...this.state.items];
  items.splice(index, 1);

  this.setState({ items });
}

So in this case when I log items changes but this.state.items stays unchanged. Question is, why does everyone use filter instead of splice with spread? Does it have any cons?

Answer 1

filter() has a more functional approach, which has its benefits. Working with immutable data is much more easier, concurrency and error safe.

But in your example, you are doing something similar by creating the items array. So you are still not mutating any existing arrays.

---

const items = [...this.state.items];

Creates a copy of this.state.items, thus it will not mutate them once you do a splice().

So considering you approach, it is no different than filter(), so now it just boils down to a matter of taste.

const items = [...this.state.items];
items.splice(index, 1);

VS

this.state.items.filter(i => ...);

Also performance may be taken into consideration. Check this test for example.