title: conditional async actions in componentDidMount lifecycle method keeps going on a loop
body: <p>I am working on a react app using redux and sagas connected to an API.</p>
  
  <p>There's a form component that has two dropdown fields: a Program and a Contact field. The way the form is designed to work is, when the user selects a program, the form uses the programId to fetch all the contacts that have registered for that program. These contacts are then populated as the options for the contact dropdown field. This works and I've implemented it using the componentWillReceiveProps, like this:-</p>
  
  <pre><code>componentWillReceiveProps(nextProps) {
      if (nextProps.programId !== this.props.programId) {
          this.props.fetchProgramContacts(nextProps.programId);
      }
  }
  </code></pre>
  
  <p>Now I'm trying to have an additional feature that autopopulates the form with the programId when this form is accessed from the program's profile page. In this case, since the programId is preloaded into the formData even before the component mounts, the componentWillReceiveProps is not triggered as there is no change in the prop. So I decided to have the programContacts fetching in the componentDidMount lifecycle method, like this:-</p>
  
  <pre><code>componentDidMount() {
      if (this.props.programId !== '' &amp;&amp; !this.props.programContactData.length) {
          this.props.fetchProgramContacts(this.props.programId);
      }
  }
  </code></pre>
  
  <p>The logic is that the fetch request must be made only when the programId is not empty and the programContacts are empty. But this goes on an endless loop of fetching.</p>
  
  <p>I discovered that the if statement gets executed over and over because the expressions in the body of the if statement is executed again by the componentDidMount even before the previous fetch request gets returned with the results. And because one of the conditions is to check whether the length of the results array is nonempty, the if statement returns true and so the loop goes on without letting the previous requests reach completion.</p>
  
  <p>What I don't understand is why the if statement must be executed repeatedly. Shouldn't it exit the lifecycle method once the if statement is executed once?</p>
  
  <p>I know that maybe it is possible to use some kind of a timeout method to get this to work, but that is not a robust enough technique for me to rely upon.</p>
  
  <p>Is there a best practice to accomplish this?</p>
  
  <p>Also, is there any recommendation to not use if conditionals within the componentDidMount method?</p>