title: React setState in promise causing infinite loop
body: <h3>Expected</h3>
  
  <p>When <code>fetchServices()</code> is called, <code>api.getServices</code> is called and in the promise <code>this.setState</code> is called to change <code>fetchingServices</code> to <code>false</code>. Which then hides the loading spinner animation.</p>
  
  <h3>Results</h3>
  
  <p>For some reason the App is stuck in an infinite loop:</p>
  
  <p><a href="https://i.stack.imgur.com/DXnWA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DXnWA.png" alt="enter image description here"></a></p>
  
  <h3>In my ServicesContainer</h3>
  
  <pre><code>constructor(props) {
    super(props);
    this.state = {
      services: props.state.servicesReducer.services,
      fetchingServices: true,
      addingService: false
    }
    this.fetchServices = this.fetchServices.bind(this);
  }
  </code></pre>
  
  <h3>The return()</h3>
  
  <pre><code>return (
    &lt;div className='services-container'&gt;
      &lt;ul className='services-list'&gt;
        &lt;li&gt;
          &lt;AddServiceContainer /&gt;
        &lt;/li&gt;
        { this.state.fetchingServices
            ? &lt;div className="icon-spin5 animate-spin"&gt;&lt;/div&gt;
            : null }
  
        { this.fetchServices() }
      &lt;/ul&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <h3>Finally fetchServices()</h3>
  
  <pre><code>fetchServices() {
    console.log('fetchServices')
    api.getServices(12345).then(res =&gt; {
      console.log(' api.getServices res:', res)
  
      this.setState({
        fetchingServices: false
      });
    });
  }
  </code></pre>
  
  <p><strong>Full code</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import { connect } from 'react-redux'
  
  import { AddServiceContainer } from './AddServiceContainer'
  import { ServiceCard } from '../../components'
  import { getServices } from '../../actions'
  import * as api from '../../services/api'
  
  export class ServicesContainer extends Component {
      constructor(props) {
          super(props);
          this.state = {
              services: props.state.servicesReducer.services,
              fetchingServices: true,
              addingService: false
          }
          this.fetchServices = this.fetchServices.bind(this);
      }
  
      onFormSubmit(e, user) {
          e.preventDefault();
          this.props.searchUser(user)
      }
  
      fetchServices() {
          console.log('fetchServices')
          api.getServices(12345).then(res =&gt; {
              console.log(' api.getServices res:', res)
  
              this.setState({
                fetchingServices: false
              });
          });
      }
  
      render() {
          return (
              &lt;div className='services-container'&gt;
                  &lt;ul className='services-list'&gt;
                      &lt;li&gt;
                          &lt;AddServiceContainer /&gt;
                      &lt;/li&gt;
                      { this.state.fetchingServices
                              ? &lt;div className="icon-spin5 animate-spin"&gt;&lt;/div&gt;
                              : null }
  
                      { this.fetchServices() }
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return {
          state
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          getServices: (services) =&gt; { dispatch(getServices(services)) }
      }
  }
  
  const ServicesListContainer = ServicesContainer;
  export default connect(mapStateToProps, mapDispatchToProps)(ServicesListContainer)
  </code></pre>