title: Track only one state React
body: <p>The issue I've encountered is an infinite loop.</p>
  
  <p>I have this state:</p>
  
  <pre><code>this.state = {
    apiData: [],
    pageNum: 1,
    isLoadingList: 0,
    search: "",
    layout: "list"
  }
  </code></pre>
  
  <p>I have a function that fetch data from an API:</p>
  
  <pre><code>fetchApi(){
    fetch("www.api.com", ...)
  }
  </code></pre>
  
  <p>And once the data fetched, it saves everything in apiData (this.state.apiData)</p>
  
  <p>The thing I'm trying to do is to call that function, "fetchApi()", when "this.state.search" changes. If I do that using Lifecycle's components like componentDidUpdate(), ... it will create an infinite loop as apiData is a state too (the changes made to this.state.apiData will trigger Lifecycle's components related to states again, and again, and ...).</p>
  
  <p>So I would like to track <strong>ONLY</strong> this.state.search and when it changes it calls the function "fetchApi()" that change this.state.apiData value.</p>
  
  <p>I might trying to do something that is wrong and shouldn't be done like that, so any ideas to do the same thing but in a different way are welcome.</p>
  
  <p>Thanks!</p>