Re-render React component when prop changes
<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>