title: React component render is called multiple times when pushing new URL
body: <p>I am building a PhotoViewer that changes photos when the user presses left or right. I am using React, Redux, react-router, and react-router-redux. When the user presses left or right, I do two things, I update the url using <code>this.context.replace()</code> and I dispatch an action to update the currently viewed photo, <code>this.props.dispatch(setPhoto(photoId))</code>. I am subscribing to state changes for debugging.</p>
  
  <p>Each of the above lines triggers a new state change. Dispatching an action updates the store since I update the <code>currentlyViewedPhoto</code> and updating the url updates the store because react-router-redux updates the url in the store. When I dispatch the action, in the first rerendering cycle, the component's <code>render</code> function gets called twice. In the second rerendering cycle, the component's <code>render</code> function gets called once. Is this normal? Here is the relevant code:</p>
  
  <pre><code>class PhotoViewer extends Component {
    pressLeftOrRightKey(e) {
      ... code to detect that left or right arrow was pressed ...
  
      // Dispatching the action triggers a state update
      // render is called once after the following line
      this.props.dispatch(setPhoto(photoId)) // assume photoId is correct
  
      // Changing the url triggers a state update
      // render is called twice
      this.context.router.replace(url) // assume url is correct
      return
    }
  
    render() {
      return (
        &lt;div&gt;Test&lt;/div&gt;
      )
    }
  }
  
  function select(state) {
    return state
  }
  
  export default connect(select)(PhotoViewer)
  </code></pre>
  
  <p>Is this normal that render is called three times? It seems like overkill because React will have to do the DOM diffing three times. I guess it won't really matter because nothing has changed. I am new to this toolset, so feel free to ask any more questions about this problem.</p>