title: Called componentDidMount twice
body: <p>I have a small react app. In App.js I have layout <strong>Sidenav</strong> and <strong>Content</strong> area. The side nav is shown on some page and hid from others. When I go to some components with sidenav, sidenav flag is set by redux and render the component again, in the <strong>componentDidMount</strong> I have api call, and it is executed twice.</p>
  
  <pre class="lang-js prettyprint-override"><code>class App extends Component {
  
    renderSidebar = () =&gt; {
      const {showNav} = this.props;
      return showNav ? (
              &lt;TwoColumns&gt;
                  &lt;Sidenav/&gt;
              &lt;/TwoColumns&gt;) : null;
    };
  
    render() {
      const {showNav} = this.props;
      const Column = showNav ? TenColumns : FullColumn;
  
      return (
        &lt;Row spacing={0}&gt;
             {this.renderSidebar()}
             &lt;Column&gt;
                 &lt;Route exact path="/measurements/:id/:token/:locale/measure"
                                                  component={MeasurementPage}/&gt;
             &lt;/Column&gt;
        &lt;/Row&gt;
      )
    }
  }
  
  
  const mapStateToProps = state =&gt; ({
      showNav: state.sidenav.showNav
  });
  
  export default connect(mapStateToProps)(App);
  
  </code></pre>
  
  <p>I tried to use <strong>shouldComponentUpdate</strong> to prevent the second API call</p>
  
  <pre class="lang-js prettyprint-override"><code>class MeasurementPage extends Component { 
    constructor(props) {
      // This update the redux "showNav" flag and re-render the component
      props.toggleSidenav(false);
    }
  
    shouldComponentUpdate(nextProps) {
      return !nextProps.showNav === this.props.showNav;
    }
  
    componentDidMount() {
      // This is executed twice and made 2 api calls
      this.props.getMeasurement(params);
    }
  
    render() {
      return &lt;h1&gt;Some content here&lt;/h1&gt;;
    }
  }
  
  const mapStateToProps = state =&gt; ({
      showNav: state.sidenav.showNav
  });
  
  export default connect(mapStateToProps)(MeasurementPage);
  </code></pre>
  
  <p>Did someone struggle from this state update and how manage to solve it?</p>