Why we are making copy of reference types in react before we mutate them?

Question

I am new in react world. I have this example code here where with the deletePersonHandler method i am deleting some objects from the array.

class App extends Component {
  state = {
    persons: [
      { name: "peter", age: 24 },
      { name: "john", age: 25 },
      { name: "jake", age: 30 }
    ],
    showPersons: true
  }

  deletePersonHandler = index => {
    const persons = this.state.persons;
    persons.splice(index,1);
    this.setState({persons:persons})
  }


  togglePersonsHandler = () => {
    this.setState({ showPersons: !this.state.showPersons })
  }

  render() {

    let persons = null;
    if (this.state.showPersons) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
            return <Person
              click={() => this.deletePersonHandler(index)}
              name={person.name}
              age={person.age}
              key={index}
            />
          })}
        </div>
      );
    }
    return (
      <div className="App">
        {persons}
        <button onClick={this.togglePersonsHandler}>Click to hide/show</button>
      </div>
    )
  }
}

export default App;

and it is working fine. My question is:

when this works - without making copy in this case on persons

deletePersonHandler = index => {
    const persons = this.state.persons;
    persons.splice(index,1);
    this.setState({persons:persons})
  }

why the recommended way is to make the COPY FIRST AND THEN MODIFY THE REFERENCE TYPE ?

deletePersonHandler = index => {
    const persons = [...];
    persons.splice(index,1);
    this.setState({persons:persons})
  }

Its mentioned couple of times in the docs https://reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data — Dennis Vash, Dec 30 '20 at 08:25
According to [this question](https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called), component will re-render after you update state through `this.setState` method. So modify original objects or arrays and update state by `this.setState` is fine. — Clark, Dec 30 '20 at 08:31
But if you using react-redux manage your state, redux will compare the new state and original state to check if need to re-render component. So we need to give a new objects or arrays update state on store of redux. — Clark, Dec 30 '20 at 08:37

score 0 · Answer 1 · answered Dec 30 '20 at 08:37

I am explaining this based on my experience with object in JavaScript. I had one publisher and subscriber code where there was an array of object which used to keep track of some message number and their handler like this

let observer = {"8000":[handler1, handler2]};

So when something happens i publish 8000 message and all handlers get executed like this

for(var item in observer[8000]){
   //execute handler/
}

. Till here it was working pretty cool. Then I started removing handler when it has been processed. So after removing handler length of array observer[8000] reduced by 1. So in next sequence it could not find next handler which didn't execute(Objects are pass by reference in JavaScript). So to resolve this I had to make a copy of array object before directly modifying this. In short if object has many dependencies then before processing make copy of it then process or if it is used only single place then use in place processing. It depends on situation, there aren't any strict rules to follow like copy then process.

Why we are making copy of reference types in react before we mutate them?

1 Answers1