title: ComponentDidUpdate SetState ReactJS Infinite loop
body: <p>Even though there are many questions with the same subject line, I could not get an answer for my problem.</p>
  <p><strong>Problem</strong></p>
  <p>
        I have a select dropdown. On click of which, I call an Api which fetches some key values. I consider this set of key value input fields as a component. So each and every time onChange of my select drop-down, I have used lifecycle methods to handle API Calls. Also, I record these input key values and send back their state to parent component.
  </p>
  <p>According to ReactJS lifecycle methods:</p>
  <p>I use</p>
  <p><strong>componentDidMount</strong>
  To call the API for the first time after initial render. This works.</p>
  <p><strong>componentDidUpdate</strong>
  To call the API for subsequent API calls on select drop-down change. But here is the problem. When I try to update the state of input fields the program falls into an infinite loop and hence there are infinite API calls. I am pretty sure after debugging that the problem is with setState(), But I couldnt find the best way to handle states in componentDidUpdate method.</p>
  <p>This <a href="https://github.com/joshwnj/words/blob/master/react-infinite-loop.md" rel="nofollow noreferrer">link</a> exactly replicates my problem but i want a standardized solution</p>
  <p>Hope this is clear.
  Thanks for the help in advance!</p>