Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When to use componentWillReceiveProps lifecycle method?

I am new to React/Redux and have a problem with state.

TrajectContainer.jsx

class TrajectContainer extends React.Component {     constructor(props) {         super(props);         this.state = {             trajects: props.trajects,             onClick: props.onClick         };     }      componentWillReceiveProps(nextProps) {         console.log('componentWillReceiveProps', nextProps);         this.setState(nextProps);     }      render() {         // When the componentWillReceiveProps is not present, the this.state will hold the old state         console.log('rerender', this.state);         return (<div className="col-md-6">             <h2>Trajects</h2>             <button className="btn btn-primary" onClick={this.state.onClick}>Add new Traject</button>             {this.state.trajects.map(traject => <Traject traject={traject} key={traject.name}/>)}         </div>)     } }  const mapStateToProps = function (store) {     console.log('mapToStateProps', store);     return {         trajects: store.trajects     }; };  const mapDispatchToProps = function (dispatch, ownProps) {     return {         onClick: function () {             dispatch(addTraject());         }     } };  export default connect(mapStateToProps, mapDispatchToProps)(TrajectContainer); 

When a reducer returns a new state, the component will rerender with the new data.

However: if I remove the componentWillReceiveProps function, the render() function has the old state.

I checked the data received in mapStateToProps, and this is new New State. So I don't understand why I need the componentWillReceiveProps function in order for the render function to receive the new data.

Am I doing something wrong?

like image 443
Mazzy Avatar asked Sep 08 '17 09:09

Mazzy


People also ask

When should I use componentWillReceiveProps?

ReactJS – componentWillReceiveProps() Method This method is used during the updating phase of the React lifecycle. This function is generally called if the props passed to the component change. It is used to update the state in response with the new received props.

When should I use componentDidUpdate method?

The componentDidUpdate() method allows us to execute the React code when the component is updated. All the network requests that are to be made when the props passed to the component changes are coded here.

What should I use instead of componentWillReceiveProps?

getDerivedStateFromProps is one of those newly introduced lifecycle method replacing componentWillReceiveProps , which has now become UNSAFE_componentWillReceiveProps .

When should I use componentWillUnmount?

The componentWillUnmount() method allows us to execute the React code when the component gets destroyed or unmounted from the DOM (Document Object Model). This method is called during the Unmounting phase of the React Life-cycle i.e before the component gets unmounted.


1 Answers

componentWillReceiveProps is required if you want to update the state values with new props values, this method will get called whenever any change happens to props values.


In your case why you need this componentWillReceiveProps method?

Because you are storing the props values in state variable, and using it like this:

this.state.KeyName

That's why you need componentWillReceiveProps lifecycle method to update the state value with new props value, only props values of component will get updated but automatically state will not get updated. If you do not update the state then this.state will always have the initial data.

componentWillReceiveProps will be not required if you do not store the props values in state and directly use:

this.props.keyName

Now react will always use updated props values inside render method, and if any change happen to props, it will re-render the component with new props.

As per DOC:

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

React doesn't call componentWillReceiveProps with initial props during mounting. It only calls this method if some of component's props may update.

Suggestion:

Do not store the props values in state, directly use this.props and create the ui components.

like image 163
Mayank Shukla Avatar answered Sep 21 '22 16:09

Mayank Shukla