title: Update react component on Timer in external object
body: <p>I'm building a simple game in react. I assume that <a href="http://cjlarose.com/2014/01/09/react-board-game-tutorial.html" rel="nofollow noreferrer">this example</a> has it right in using react as the view layer ONLY, and putting all the game logic in it's own, external object. Is that correct?</p>
  <p>In that example, the game is only updated via the user clicking the screen - so, it's always interaction with react components themselves that trigger updates to the game. In my example, the game can also be updated based on a timer (which I would think should live within the game object itself, not in a react component).</p>
  <p>My question is, how should I update a react component, each time an external timer (within my game object) fires?</p>
  <p>The code below demonstrates how the board game example that I linked to handles updates to the game state - basically, by passing <code>this.onBoardUpdate.bind(this)</code> to its child component, which can call that function to update the board game.</p>
  <pre><code>var ContainerView = React.createClass({
      getInitialState: function() {
          return {'board': this.props.board};
      },
      onBoardUpdate: function() {
          this.setState({&quot;board&quot;: this.props.board});
      },
      render: function() {
          return (
              &lt;div&gt;
                  &lt;AlertView board={this.state.board} /&gt;
                  &lt;PassView board={this.state.board} /&gt;
                  &lt;BoardView board={this.state.board} 
                      onPlay={this.onBoardUpdate.bind(this)} /&gt;
              &lt;/div&gt;
          )
      }
  });
  
  var board = new Board(19);
  
  React.renderComponent(
      &lt;ContainerView board={board} /&gt;,
      document.getElementById('main')
  );
  </code></pre>
  <p>So, for my 'update on timer' issue, solutions I can think of are:</p>
  <p>a) Have the timer live in the game object, and just re-render the whole component on each tick</p>
  <p>b) Have the timer live in the game object. At some point, pass a function from the react component back into the game object, (kinda like the example above, which passes <code>this.onBoardUpdate.bind(this)</code>) so that the game can update the react component itself.</p>
  <p>c) Have the timer live in the react component, and the timer calls the <code>tick</code> function on the game object, then updates it's own state. This means the game object itself will know how to <code>tick</code>, but not <em>when</em> to <code>tick</code>.</p>
  <p>None of these seem very tidy to me. Which is best? Or is there a better way?</p>
  <p>Lastly, in the above example, it somehow seems funny that the <code>onBoardUpdate</code> method simply sets <code>board</code> within the component's state to the value of <code>board</code> within the components prop's: <code>this.setState({&quot;board&quot;: this.props.board});</code>. Is this a normal pattern?</p>
  <p>(in case you hadn't guessed, I'm brand new to react!)</p>