title: React ComponentDidMount being called multiple times
body: <p>I am trying to make a fetch api call inside of <code>AccountItem.js</code> like so:</p>
  
  <pre><code>componentDidMount() {
      // I am calling console.log("item mounted"); here
      var url = "myurl" + this.props.portalId;
      fetch(url)
      .then(res =&gt; res.json())
      .then(data =&gt; this.setState({account: data.Items}));
  }
  </code></pre>
  
  <p>Then inside my <code>Home.js</code> it renders:</p>
  
  <pre><code>componentDidMount() {
     console.log("home mounted");
  }
  render() {
      return (
        &lt;div&gt;
          Account Dashboard
          &lt;AccountItem portalId={this.props.portalId}/&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I am logging my fetch into the console and it is being called three times. The flow is I am on the login page (mounted once upon load), I login which redirects me to the home page which itself renders . At this point in my console I see:</p>
  
  <p><code>Login mounted // initial load, now I click login
  Login mounted // Renders again then redirects to homepage
  Item mounted
  Home mounted
  Item mounted
  Home mounted
  Item mounted // Why is this happening 3 times?</code></p>
  
  <p>I am new to react, please let me know if you need any more information.</p>