title: Filtering content based on query string using React Js
body: <p>We have a simple react app.. Data is coming from an api and stored in the state. Then we use a map function to render the data. And use sort and filter functions to manipulate the data.</p>
  
  <p>Now, we are trying to associate the filter information with the URL by using the query string. So that, on sharing the page URL, filter data is also passed along with it.</p>
  
  <p>We are updating the query string using the link tag of 'react-router-dom' library</p>
  
  <pre><code>&lt;Link to='/pagePath?queryStringKey=queryStringValue'&gt; Link Content &lt;/Link&gt;
  </code></pre>
  
  <p>Now, how to listen to query string change? componentDidMount runs only once when the component is mounted. But when the query string is changed using the Link tag, componentDidMount do not run. And if we listen from render function then it gives this error. </p>
  
  <pre><code>Error: Maximum update depth exceeded. 
  </code></pre>
  
  <p>What is the right way to listen/detect the query string change?</p>