Mutating Data in React.js

Question

I am reading the document of Reactjs about not mutating data. I do not understand the difference between 2 pieces of code in document's example:

handleClick() {
  // This section is bad style and causes a bug
  const words = this.state.words;
  words.push('marklar');
  this.setState({words: words});

}

and:

handleClick() {
  this.setState(prevState => ({
   words: prevState.words.concat(['marklar'])
  }));
}

Why the second code does not mutate the data?

In the first, you're pushing to the reference of the array. On the second, you copy the array with concat and does not mutate current state — Andrew Li
– Andrew Li, Commented Sep 22, 2017 at 14:39

Rowland · Accepted Answer · 2017-09-22 14:39:16Z

1

Simply put, concatreturns a new copy of the array, hence it doesn't mutate the previous array.

answered Sep 22, 2017 at 14:39

Rowland

1,8631 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory O'Kane · Accepted Answer · 2017-09-22 14:48:03Z

0

In the first example you have an array and are adding a new item, by using push to this array.

In the second example you are creating a copy of the array, by using concat and adding the item, which means you do not mutate the original array. concat returns a new array.

In the second example you are not mutating the original array. Not mutating state is an important principle in React and Redux.

There is a good answer here explaining the reasons for avoiding mutation.

edited Sep 22, 2017 at 14:48

Rory O'Kane

30.7k11 gold badges101 silver badges133 bronze badges

answered Sep 22, 2017 at 14:37

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

Collectives™ on Stack Overflow

Mutating Data in React.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related