title: Prevent react component from rendering twice when using redux with componentWillMount
body: <p>I have a React component that dispatches a redux state change in its <code>componentWillMount</code> function. The reason is that when the component is loaded, it needs to get the <code>id</code> from the url (powered by <code>react-router</code>), and trigger an action that sets up the state with that <code>id</code>'s data.</p>
  
  <p>Here is the component:</p>
  
  <pre><code>class Editor extends React.Component {
  
      componentWillMount() {
          const { dispatch, params } = this.props
          dispatch(editItem(params.id))
      }
  
      render() {
          const item = this.props.item
          console.log("Editing", item)
      }
  }
  
  export default connect(state =&gt; ({item: state.item}))(Editor)
  </code></pre>
  
  <p>Here's the catch: <code>render</code> is getting called twice. <code>item</code> is undefined on the first call, and valid on the second. Ideally, it should only be called once <code>this.props.item</code> actually exists (after the <code>editItem</code> action has been dispatched and run).</p>
  
  <p>According to the <a href="https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount">React docs</a>: "If you call <code>setState</code> within this method, <code>render()</code> will see the updated state and will be executed only once despite the state change."</p>
  
  <p>In redux, <code>dispatch</code> is the equivalent of calling <code>setState</code>, as it results in a state change. However, I'm guessing something in the way <code>connect</code> works is still causing <code>render</code> to be called twice.</p>
  
  <p>Is there a way around this besides adding a line like <code>if (!item) return;</code> ?</p>