title: How to prevent additional re-renders due to params on NextJS?
body: <p>I'm setting up a generic loading strategy for NextJS apps using framer-motion.</p>
  <pre><code>function MyApp({ Component, pageProps, router }) {
      const [isFirstMount, setIsFirstMount] = useState(true);
  
      useEffect(() =&gt; {
          const handleRouteChange = () =&gt; {
              setIsFirstMount(false);
          };
  
          router.events.on(&quot;routeChangeStart&quot;, handleRouteChange);
  
          // If the component is unmounted, unsubscribe
          // from the event with the `off` method:
          return () =&gt; {
              router.events.off(&quot;routeChangeStart&quot;, handleRouteChange);
          };
      }, [router]);
      console.log(&quot;My App ran&quot;);
      return (
          &lt;Layout&gt;
              &lt;AnimatePresence exitBeforeEnter&gt;
                  &lt;motion.div exit={{ opacity: 0 }}&gt;
                      {isFirstMount &amp;&amp; &lt;InitialTransition /&gt;}
                      &lt;motion.div
                          initial=&quot;initial&quot;
                          animate=&quot;animate&quot;
                          variants={content(isFirstMount)}
                          className=&quot;space-y-12&quot;
                      &gt;
                          &lt;Component
                              isFirstMount={isFirstMount}
                              key={router.route}
                              {...pageProps}
                          /&gt;
                      &lt;/motion.div&gt;
                  &lt;/motion.div&gt;
              &lt;/AnimatePresence&gt;
          &lt;/Layout&gt;
      );
  }
  </code></pre>
  <p>I ran into an issue with params. When using params during initial loading (such as clicking on the refresh button on browser), NextJS loads an additional time. I believe its due to NextJS's router query object update. For example,</p>
  <pre><code>WEBSITE.com/ // works - you will see the black loading screen, the black loading screens slides down, and the child objects start popping on
  // vs
  WEBSITE.com/?test=test // fails - you will see the black loading screen flash in and out of view before the rest of the app proceeds
  </code></pre>
  <p>I made a <a href="https://codesandbox.io/s/nextjs-page-transition-o75wk?file=/pages/_app.js:221-1162" rel="nofollow noreferrer">codesandbox</a> sample. On the browser side, test by adding or removing <code>?test=test</code> to the end of the url.</p>
  <p><strong>How can I prevent the additional re-render or get the loader to work the same way regardless of having a param or not?</strong></p>
  <hr />
  <p>Update</p>
  <p>I tried @Mokhtar 's code. Technically, it did nothing yet the transitioning started worked. Eventually I figured out that removing all the <code>isFirstMount</code> and <code>useEffect</code> logic would make the transitioning correctly.</p>
  <pre><code>function MyApp({ Component, pageProps, router }) {
      console.log(&quot;My App ran&quot;);
      return (
          &lt;Layout&gt;
              &lt;AnimatePresence exitBeforeEnter&gt;
                  &lt;motion.div exit={{ opacity: 0 }}&gt;
                      &lt;InitialTransition /&gt;
                      &lt;motion.div
                          initial=&quot;initial&quot;
                          animate=&quot;animate&quot;
                          variants={content(true)}
                      &gt;
                          &lt;Component key={router.route} {...pageProps} /&gt;
                      &lt;/motion.div&gt;
                  &lt;/motion.div&gt;
              &lt;/AnimatePresence&gt;
          &lt;/Layout&gt;
      );
  }
  </code></pre>
  <p><strong>Does anyone know why its working?</strong> I thought the exit opacity / sliding action only works when the Component is removed.</p>