React - setState in componentWillReceiveProps

Question

Is this legal?

componentWillReceiveProps: function(nextProps) {         if (typeof nextProps.contact != 'undefined') {             this.setState({forename: nextProps.contact.forename});             this.setState({surname: nextProps.contact.surname});             this.setState({phone: nextProps.contact.phone});             this.setState({email: nextProps.contact.email});         }     } 

Because I don't know how to fill my inputs and still be able that the user can edit the inputs. So I came up with this solution instead of trying to manipulate the this.props.

Any suggestions?

Answer 1

Your code is legal according to react documentation.

You also may consider to put this code inside getInitialState method as according to another react doc initializing from props is not an anti-pattern.

You also can replace several calls with one setState method call:

 this.setState({forename: nextProps.contact.forename,                 surname: nextProps.contact.surname,                 phone: nextProps.contact.phone,                 email: nextProps.contact.email}); 

Answer 2

As of React v16.6.3 this is considered UNSAFE and componentWillReceiveProps is marked for deprecation. The removal is planned to happen in version 17.

Note:

Using this lifecycle method often leads to bugs and inconsistencies, and for that reason it is going to be deprecated in the future.

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

For other use cases, follow the recommendations in this blog post about derived state.

If you used componentWillReceiveProps for re-computing some data only when a prop changes, use a memoization helper instead.

If you used componentWillReceiveProps to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.

In very rare cases, you might want to use the getDerivedStateFromProps lifecycle as a last resort.

In your case you should use componentDidUpdate instead.