CODEWITHSUNDEEP
reactjs
gkhan
gkhan

Reputation: 47

Updating State with componentWillReceiveProps

I am looking at someone else code who updated the state of object in the react lifecyle:componentWillReceiveProps. I am fairly new to react and redux but thought that you do all the updating of state in the reducer useless its local state. Can someone tell me why he is doing it in componentWillReceiveProps? Thanks 

 componentWillReceiveProps(nextProps) {
    if(this.props.isEditingbook && !nextProps.isEditingbook) {
      let book = this.props.index.bookDictionary[this.props.currentbook.id] 
      book.name = this.state.model.name.value
    }
    this.setState({ ...this.state, ...nextProps})
  }

Upvotes: 0

Views: 437

Answers (1)

Gustavo Topete
Gustavo Topete

Reputation: 1306

Well, first of all, componentWillrecieveProps has been deprecated because it might cause some problems, take a look here . Instead, React docs point out that you should use componentDidUpdate which is a safe-to-use method.

And answering your question, if you looked a code where that person was using redux, then he used that deprecated method because when you bind a component to redux goblal state (store) through mapStateToProps, it's properties are bind to that component props. So, in other words, whenever the global state changes so does the component props, and if you want to "track" these changes in your component logic, you have to know when it's props are going to change, that's why you use componentWillRecieveProps or componentDidUpdate methods.

Here is how that example code should has been done with componentDidUpdate:

componentDidUpdate(prevProps) { //prevProps is the previous props of the component before being updated
   //so, if this.props != prevProps it means that component props have been updated

    if(this.props.isEditingbook && !prevProps.isEditingbook) {
      let book = this.props.index.bookDictionary[this.props.currentbook.id] 
      book.name = this.state.model.name.value
    }
    this.setState({ ...this.state, ...prevProps})
  }

Upvotes: 1

Related Questions