title: How to make an API call on props change?
body: <p>I'm creating a hackernews-clone using <a href="https://hn.algolia.com/api" rel="nofollow noreferrer">this API</a></p>
  
  <p>This is my component structure</p>
  
  <pre><code>-main
     |--menubar
     |--articles
     |--searchbar
  </code></pre>
  
  <p>Below is the code block which I use to fetch the data from external API. </p>
  
  <pre><code>componentWillReceiveProps({search}){
      console.log(search);
  }
  
  componentDidMount() {
      this.fetchdata('story');
  }
  
  fetchdata(type = '', search_tag = ''){
      var url = 'https://hn.algolia.com/api/v1/search?tags=';
      fetch(`${url}${type}&amp;query=${search_tag}`)
      .then(res =&gt; res.json())
      .then(data =&gt; {
          this.props.getData(data.hits);
      });
  }
  </code></pre>
  
  <p>I'm making the API call in <code>componentDidMount()</code> lifecycle method(as it should be) and getting the data correctly on startup. 
  But here I need to pass a search value through <strong>searchbar</strong> component to <strong>menubar</strong> component to do a custom search. As I'm using only react (not using redux atm) I'm passing it as a <code>prop</code> to the <strong>menubar</strong> component.
  As the mentioned codeblock if I search <strong>react</strong> and passed it through props, it logs <strong>react</strong> once (as I'm calling it on <code>componentWillReceiveProps()</code>). But if I run <code>fetchData</code> method inside <code>componentWillReceiveProps</code> with <code>search</code> parameter I receive it goes an infinite loop. And it goes an infinite loop even before I pass the search value as a prop.</p>
  
  <p>So here, how can I call <code>fetchdata()</code> method with updating <code>props</code> ?</p>
  
  <p>I've already read <a href="https://stackoverflow.com/questions/39000698/react-call-function-on-props-change">this</a> stackoverflow answers but making an API call in <code>componentWillReceiveProps</code> doesn't work. </p>
  
  <p>So where should I call the <code>fetchdata()</code> in my case ? Is this because of asynchronous ? </p>
  
  <p><strong>Update</strong> : <a href="https://codesandbox.io/s/o985m55kj6" rel="nofollow noreferrer">codepen</a> for the project</p>