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 = () => {
            setIsFirstMount(false);
        };

        router.events.on("routeChangeStart", handleRouteChange);

        // If the component is unmounted, unsubscribe
        // from the event with the `off` method:
        return () => {
            router.events.off("routeChangeStart", handleRouteChange);
        };
    }, [router]);
    console.log("My App ran");
    return (
        <Layout>
            <AnimatePresence exitBeforeEnter>
                <motion.div exit={{ opacity: 0 }}>
                    {isFirstMount && <InitialTransition />}
                    <motion.div
                        initial="initial"
                        animate="animate"
                        variants={content(isFirstMount)}
                        className="space-y-12"
                    >
                        <Component
                            isFirstMount={isFirstMount}
                            key={router.route}
                            {...pageProps}
                        />
                    </motion.div>
                </motion.div>
            </AnimatePresence>
        </Layout>
    );
}

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,

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

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.

    Reply
  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
    interested.

    Reply
  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.

    Reply
  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.

    Reply
  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

    Reply

Leave a Comment