title: If using forceUpdate() is discouraged, how should components react to change events in the model?
body: <p>I use the following pattern in several components throughout my app. I notice that many people discourage using forceUpdate(), and some even call it a hack. So how should this be done without using it?</p>
  
  <pre><code>// user.js
  
  export default class User extends EventEmitter {
      constructor(args) {
          super();
          this.id = args.id;
          this.isActivated = args.isActivated || false;
      }
      activate() {
          this.isActivated = true;
          this.emit('change');
      }
  }
  
  // UserView.jsx
  
  export default class UserView extends React.Component {
      componentDidMount() {
          this.props.user.on('change', this.onUserUpdate);
      }
      onUserUpdate() {
          this.forceUpdate();
      }
      render (
          var user = this.props.user;
          return (
              &lt;div&gt;
                  &lt;span&gt;User {user.isActivated ? 'is' : 'is not'} activated.&lt;/span&gt;
                  &lt;button onClick={user.activate()}&gt;Activate&lt;/button&gt;
              &lt;/div&gt;
          );
      );
  }
  
  // app.js
  
  var user = new User({ id: 123 });
  ReactDOM.render(&lt;UserView user={user} /&gt;, container);
  </code></pre>