title: Constructor getting called twice React Component
body: <p>The constructor of my react component is getting called twice but I can't figure out why. I am using react-redux to store the language of my app. I have a function that set the default language base on browser's language. <strong>LoginPage</strong> is the first component that gets render so I called my function in its constructor. Basically what it does is compare and dispatch an action. When I checked my state with redux developer tools I saw that it was getting dispatched twice. I printed dummy data in the constructor and it gets printed twice too.</p>
  
  <p>LoginPage.js</p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import {startLogin} from '../actions/auth';
  import {setLanguage} from '../actions/lang';
  
  export class LoginPage extends React.Component{
  
    constructor(props){
      super(props);
      this.setDefaultLanguage();
      console.log('i am constructor');
    }
  
    changeLanguage = (e) =&gt; {
      const lan = e.target.value;
      this.props.setLanguage(lan);
    };
  
    setDefaultLanguage = () =&gt; {
      const defaultLanguage = navigator.language || navigator.userLanguage || 'en-US';
  
      if(defaultLanguage == 'es'){
        this.props.setLanguage(defaultLanguage);
      }else{
        this.props.setLanguage('en');
      }
    }
  
    render(){
      return(
        &lt;div className="box-layout"&gt;
          &lt;div className="box-layout__box"&gt;
            &lt;h1 className="box-layout__title"&gt;Expensify&lt;/h1&gt;
            &lt;p&gt;It\'s time to get your expenses under control.&lt;/p&gt;
            &lt;button className="button" onClick={this.props.startLogin}&gt;Log in with google&lt;/button&gt;
            &lt;select className="select" onChange={this.changeLanguage}&gt;
              &lt;option value="en"&gt;English&lt;/option&gt;
              &lt;option value="es"&gt;Español&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    };
  }
  
  const mapDispatchToProps = (dispatch) =&gt; ({
    startLogin: () =&gt; dispatch(startLogin()),
    setLanguage: (language) =&gt; dispatch(setLanguage(language))
  });
  
  export default connect(undefined, mapDispatchToProps)( LoginPage);
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import {Router, Route, Switch} from 'react-router-dom';
  import createHistory from 'history/createBrowserHistory';
  import ExpenseDashBoardPage from '../components/ExpenseDashBoardPage';
  import AddExpensePage from '../components/AddExpensePage';
  import EditExpensePage from '../components/EditExpensePage';
  import NotFoundPage from '../components/NotFoundPage';
  import LoginPage from '../components/LoginPage';
  import PrivateRoute from './PrivateRoute';
  import PublicRoute from './PublicRoute';
  
  export const history = createHistory();
  
  const AppRouter = () =&gt; (
    &lt;Router history={history}&gt;
      &lt;div&gt;
        &lt;Switch&gt;
          &lt;PublicRoute path="/" component={LoginPage} exact={true} /&gt;
          &lt;PrivateRoute path="/dashboard" component={ExpenseDashBoardPage} /&gt;
          &lt;PrivateRoute path="/create" component={AddExpensePage} /&gt;
          &lt;PrivateRoute path="/edit/:id" component={EditExpensePage} /&gt;
          &lt;Route component={NotFoundPage} /&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
  
    &lt;/Router&gt;
  )
  
  export default AppRouter;
  </code></pre>