title: How to have a useEffect that uses `router.push` and should only fire for `router.query.id` changes in a Next.js project
body: <p>I need to transition between 2 routes in a NextJs app like the one on the following example:</p>
  <pre><code>FROM: /some-route?id=ID_1
  TO:   /some-route?id=ID_1&amp;page=2
  </code></pre>
  <p>And I have a <code>useEffect</code> that does something like this:</p>
  <ul>
  <li>Should fire for any <code>id</code> change</li>
  <li>Makes use of <code>router.push</code> for some reason</li>
  </ul>
  <pre><code>import { useRouter } from 'next/router';
  
  const { query, push } = useRouter();
  const { id } = query; 
  
  useEffect(() =&gt; {
    try {
      fetchDataFor(id);
    }
    catch(err) {
      push('/not-found');
    }
  },[id,push]);
  </code></pre>
  <p>The problem I'm facing with this is related to the fact that the whole <code>router</code> object will change from the route update, and my effect will re-run because of the <code>push</code> method reference change, even though my <code>id</code> is not changing.</p>
  <p>I'm currently having to check if the <code>id</code> has been updated or not by using some <code>useRef</code> variable that keeps track of the previous value. That's cumbersome.</p>
  <p>I thought that maybe I should use a dynamic route, like:</p>
  <pre><code>/some-route/[id]
  /some-route/[id]?page=2
  </code></pre>
  <p>But I guess the problem will remain, because of the <code>push</code> property that will keep on changing because of the querystring change.</p>
  <p>Another option would be omitting the <code>push</code> method from the useEffect's dependency array. But that seems like an anti-pattern.</p>
  <p>What would be the best approach to solve this issue?</p>
  <p>The goal here is being able to use <code>router.push</code> (or at least be able to push another route somehow) inside the <code>useEffect</code> that should only run for <code>query.id</code> updates.</p>