Unexpected updation of global variable

Question

I have a global variable

const initialProductState = {
   id: 0,
   name: '',
   price: 0,
   rating: 0
}

I am using it to set state in my Products component as

state = {
     product : initialProductState
}

And when I am calling a method(addProduct) which is using initialState to set the current state to initial from another component(ProductDetail), it unexpectedly updates initialProductState. I am unable to find the reason for this update. Here's my code :

Products component :

class Products extends Component {
constructor(props){
    super(props);
    this.state = {
        product: initialProductState,

    }
}
addProduct = (product) => {
    const newProduct = {
      ...product,
      id : this.state.totalProducts + 1,
    } 
    console.log(" initialProductState ", initialProductState)
    this.setState({
      products : newProductsArray,
      totalProducts : this.state.totalProducts + 1,
      product : initialProductState
     })

}
}
render(){
   return 
      <ProductDetail
            product={this.state.product}
            addProduct={this.addProduct}
            saveProduct={this.saveProduct}
            deleteProduct={this.deleteProduct}
            cancelProduct={this.cancelProduct}
        />
 }

ProductDetail component :

class ProductDetail extends React.Component {
   state = {
    product: initialstate,
    priceError: "",
    nameError: "",
    ratingError: ""
  }
  static getDerivedStateFromProps(props, state) {
    console.log("inside getDerivedStateFromProps")
    if (props.product !== state.product) {
        return {
            product: props.product
        };
    }
    // Return null to indicate no change to state.
    return null;
  }
  render() {
     return (
        <Button
           variant="contained"
           color="primary"
           disabled = {!(this.props.product.id === 0)}
           onClick={() => {
               this.props.addProduct({
               name: 'random',
               price: 10,
               rating: 5
           })}
           }
        >
        Add
        </Button>
     )
 }
}

Use spread operator while assign the product value in the state. — Sachin Kumar, Dec 16 '19 at 05:03
can you check this codepen and update as the usecase required https://codesandbox.io/s/59350742-so-rct7l — Learner, Dec 16 '19 at 05:20
@sachinkumar yeah you can but every level of nesting you need to spread — akhtarvahid, Dec 16 '19 at 05:27
maybe valid for at least one or two-level. and I also agree with your answer where the complexity level is low as compared to the spread operator. — Sachin Kumar, Dec 16 '19 at 05:32
Reference link https://stackoverflow.com/questions/43509153/spread-operator-vs-json-parsejson-stringify-for-immutable-objects — Sachin Kumar, Dec 16 '19 at 05:36

akhtarvahid · Accepted Answer · 2019-12-16T05:02:12.363

5

It's because of shallow copy. Most efficient way to deep clone Deep clone

change your code.

constructor(props){
    super(props);
    this.state = {
        product: JSON.parse(JSON.stringify(initialProductState)),

    }
}

edited Dec 16 '19 at 05:02

answered Dec 16 '19 at 04:59

akhtarvahid

9,445
2
26
29

1

`product: {... initialProductState}`. although it shouldn't be used if the object has nested objects. – Ahmed Eid Dec 16 '19 at 05:02
exactly. but state should be as flat as possible. – Ahmed Eid Dec 16 '19 at 05:05
@VahidAkhtar help me to understand one thing. I am updating the state after console.log(initialProductState). It means that during console.log instruction execution, the state is not updated and have its initial values. initialProductState must be updated when I update the state according to shallow copy. Then why it is updating before the update of state. – Mohit kumar Dec 17 '19 at 07:30
1

@mohitkumar because you are updating reference. whether you update state or not it will affect original object. it's concept of object. – akhtarvahid Dec 17 '19 at 08:38

Unexpected updation of global variable

1 Answers1