How to prevent additional re-renders due to params on NextJS?

I’m setting up a generic loading strategy for NextJS apps using framer-motion.

function MyApp({ Component, pageProps, router }) {
    const [isFirstMount, setIsFirstMount] = useState(true);

    useEffect(() => {
        const handleRouteChange = () => {
        };"routeChangeStart", handleRouteChange);

        // If the component is unmounted, unsubscribe
        // from the event with the `off` method:
        return () => {
  "routeChangeStart", handleRouteChange);
    }, [router]);
    console.log("My App ran");
    return (
            <AnimatePresence exitBeforeEnter>
                <motion.div exit={{ opacity: 0 }}>
                    {isFirstMount && <InitialTransition />}

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, // works - you will see the black loading screen, the black loading screens slides down, and the child objects start popping on
// vs // fails - you will see the black loading screen flash in and out of view before the rest of the app proceeds

I made a codesandbox sample. On the browser side, test by adding or removing ?test=test to the end of the url.

How can I prevent the additional re-render or get the loader to work the same way regardless of having a param or not?

135 thoughts on “How to prevent additional re-renders due to params on NextJS?”

  1. Thank you for every other excellent article. Where else could anybody get that kind of info in such an ideal method of writing? I have a presentation subsequent week, and I’m at the look for such information.

  2. Do you have a spam problem on this website; I also am a blogger, and I was
    wanting to know your situation; we have developed
    some nice procedures and we are looking to swap methods with other folks, please shoot me an email if

  3. Every weekend i used to go to see this web page, as i wish for enjoyment,
    for the reason that this this web site conations genuinely good funny stuff too.

  4. Excellent post. I was checking constantly this weblog and
    I’m impressed! Very useful info particularly the closing part 🙂 I maintain such information a lot.
    I was seeking this particular info for a very long time.

    Thank you and good luck.

  5. Hello! This is kind of off topic but I need some guidance from an established blog. Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about making my own but I’m not sure where to start. Do you have any points or suggestions? Many thanks


Leave a Comment