title: Reactjs rendering twice
body: <p>In my reactjs project, component is rendered twice. if I remove the componentDidMount, the problem is fixed. But I need it in my project. I tried the solutions on the internet, but I couldn't.</p>
  
  <p>App.js</p>
  
  <pre><code>export default class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        users: []
      };
    }
    componentDidMount() {
      fetch("https://reqres.in/api/users?page=2")
        .then(res =&gt; res.json())
        .then(result =&gt; {
          this.setState({
            users: result.data
          });
        });
    }
  
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/" render={() =&gt; &lt;Home /&gt;} /&gt;
          &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  </code></pre>
  
  <p>Home.js</p>
  
  <pre><code>export default class Home extends Component {
    render() {
      console.log("Render");
      return (
        &lt;div&gt;
          &lt;h1&gt;console.log render twice&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/wyjk931z6l" rel="nofollow noreferrer">https://codesandbox.io/s/wyjk931z6l</a></p>
  
  <p>console.log works on Home.js twice.</p>