React component render is called multiple times when pushing new URL : <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>
