4

I recently learned the hard and long way about shallow and deep cloning of objects and the relationship that exists between shallow cloned objects after doing something like this:

this.state = {
  obj: props.obj,
}

let { obj } = this.state

obj.x = event.target.value

if (obj !== this.props.obj) {
  this.setState({obj})
}

After instead assigning a deep clone of props.obj to state.obj this works like it should. I started looking around and found this pattern throughout my code:

let obj = this.state.obj
obj.x = 'test'
this.setState({obj});

Which has been working fine without me realizing that I've actually been mutating this.state directly. It hasn't been an issue because I'm almost always calling setState right after with the changes. I was following this pattern as a means to avoid mutating state directly.

  1. What is the preferred method for making changes to state like this without altering the state object directly?
  2. Is there a rule/guideline/best practice for when to deep clone an object?
  3. Is there any downside to always deep cloning in an attempt to avoid it all?

Maybe these can be boiled down to one question which I don't know how to word.

Donovan Hiland
  • 1,439
  • 11
  • 18
  • Here's a good explanation [Why can't I directly modify a component's state, really?](http://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really) – pumbo Mar 31 '17 at 06:04

1 Answers1

0

I am not 100% sure

this.setState({
  obj: { ...this.state.obj,
    x: event.target.value
  }
});
Mandeep
  • 364
  • 2
  • 16