title: Re-render React component when prop changes
body: <p>I'm trying to separate a presentational component from a container component. I have a <code>SitesTable</code> and a <code>SitesTableContainer</code>. The container is responsible for triggering redux actions to fetch the appropriate sites based on the current user.</p>
  
  <p>The problem is the current user is fetched asynchronously, after the container component gets rendered initially. This means that the container component doesn't know that it needs to re-execute the code in its <code>componentDidMount</code> function which would update the data to send to the <code>SitesTable</code>. I think I need to re-render the container component when one of its props(user) changes. How do I do this correctly? </p>
  
  <pre><code>class SitesTableContainer extends React.Component {
      static get propTypes() {
        return {
          sites: React.PropTypes.object,
          user: React.PropTypes.object,
          isManager: React.PropTypes.boolean
        }
       }
  
      componentDidMount() {
        if (this.props.isManager) {
          this.props.dispatch(actions.fetchAllSites())
        } else {
          const currentUserId = this.props.user.get('id')
          this.props.dispatch(actions.fetchUsersSites(currentUserId))
        }  
      }
  
      render() {
        return &lt;SitesTable sites={this.props.sites}/&gt;
      }
  }
  
  function mapStateToProps(state) {
    const user = userUtils.getCurrentUser(state)
  
    return {
      sites: state.get('sites'),
      user,
      isManager: userUtils.isManager(user)
    }
  }
  
  export default connect(mapStateToProps)(SitesTableContainer);
  </code></pre>