title: React use componentWillReceiveProps to re-render the component
body: <p>I can't figure out how to make my componenet re-render when the value of <code>this.props.user</code> changes. Initially the value of <code>this.props.user</code> is null but it changes to an actual value seconds after. Below I am showing the child component. The parent component maps the store state to it's props and I pass it to the child component class below.</p>
  
  <pre class="lang-js prettyprint-override"><code>export class UserInfoComponent extends Component {
    constructor(props){
      super(props);
      this.state = {user: this.props.user}
    }
  
    componentWillReceiveProps(){
      this.setState({user: this.props.user})
    }
  
    render() {
      if(this.state.user)
      return (
        &lt;h1&gt;{this.state.user.firstName}&lt;/h1&gt;
      );
  
      return (
        &lt;h1&gt;loading&lt;/h1&gt;
      )
    }
  }
  </code></pre>