title: Change state when properties change and first mount on React - Missing function?
body: <p>I have come across a problem about states based on properties.</p>
  
  <h1>The scenario</h1>
  
  <p>I have a Component parent which creates passes a property to a child component.
  The Child component reacts according to the property received.
  In React the "only" proper way to change the state of a component is using the functions componentWillMount or componentDidMount and componentWillReceiveProps as far as I've seen (among others, but let's focus on these ones, because getInitialState is just executed once).</p>
  
  <h1>My problem/Question</h1>
  
  <p>If I receive a new property from the parent and I want to change the state, only the function componentWillReceiveProps will be executed and will allowed me to execute setState. Render does not allow to setStatus.</p>
  
  <p>What if I want to set the state on the beginning and the time it receives a new property?
  So I have to set it on getInitialState or componentWillMount/componentDidMount. Then you have to change the state depending on the properties using componentWillReceiveProps.</p>
  
  <p>This is a problem when your state highly depends from your properties, which is almost always. Which can become silly because you have to repeat the states you want to update according to the new property.</p>
  
  <h1>My solution</h1>
  
  <p>I have created a new method that it's called on componentWillMount and on componentWillReceiveProps. I have not found any method been called after a property has been updated before render and also the first time the Component is mounted. Then there would not be a need to do this silly workaround.</p>
  
  <p>Anyway, here the question: <strong>is not there any better option to update the state when a new property is received or changed?</strong></p>
  
  <pre><code>/*...*/
  /**
   * To be called before mounted and before updating props
   * @param props
   */
  prepareComponentState: function (props) {
      var usedProps = props || this.props;
  
      //set data on state/template
      var currentResponses = this.state.candidatesResponses.filter(function (elem) {
          return elem.questionId === usedProps.currentQuestion.id;
      });
      this.setState({
          currentResponses: currentResponses,
          activeAnswer: null
      });
  },
  componentWillMount: function () {
      this.prepareComponentState();
  },
  componentWillReceiveProps: function (nextProps) {
      this.prepareComponentState(nextProps);
  },
  /*...*/
  </code></pre>
  
  <p>I feel a bit stupid, I guess I'm loosing something...
  I guess there is another solution to solve this.</p>
  
  <p>And yeah, I already know about this:
  <a href="https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html" rel="noreferrer">https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html</a></p>